/* Stage 28 Part 3 - static/css/lesson.css
   Hand-written CSS for the new learner-facing "lesson" pages (starting
   with /training/my-daily-lesson/, STAGE_28_REPORT.md Priority 1). No
   Bootstrap dependency (Part 2.2) - every rule here is a deliberate
   choice, not an inherited framework default.

   STAGE_29_REPORT.md Part B: Stage 28's own navy/crimson direction is
   explicitly overridden here, per instruction, to the same --primary
   (#00E5FF cyan) / --secondary (#1e40af blue) pair already used by
   accounts/templates/accounts/dashboard_services.html - copied exactly,
   not re-derived. --lesson-navy/--lesson-crimson (used throughout the
   rest of this file) now alias --secondary/--primary rather than their
   own Stage 28 hex values, so every rule below picks up the new palette
   without being rewritten individually. --lesson-gold is kept as-is - a
   real check (STAGE_29_REPORT.md Part B) confirms it still reads fine
   against the new blue/cyan pair (gold-on-navy-blue is a common, legible
   pairing; nothing here uses gold against cyan directly). */

:root {
    /* Stage 65 Part 3: `--primary`/`--secondary` used to be defined here, raw and unnamespaced -
       real, confirmed live bug: `static/css/bootstrap.min.css` (loaded AFTER this file on every
       real Tier 2 page) defines its own real `:root { --primary: #007bff; --secondary: #6c757d;
       }` under the exact same bare names. Same specificity (`:root` vs `:root`), later source
       order - Bootstrap's own grey/blue silently won, so every real `var(--lesson-navy)`/
       `var(--lesson-crimson)` usage sitewide (60+ real rules, `lesson.css`/`tier2.css`/`qms.css`
       combined) resolved to Bootstrap's own generic grey (`#6c757d`) instead of this site's real
       navy - not just the nav, everything using these tokens. Fixed at the root: `--lesson-navy`/
       `--lesson-crimson` are now defined directly, no dependency on any bare, collision-prone
       name - confirmed live, nothing else in this real codebase still needs a raw `--primary`/
       `--secondary` token (grepped every real template/stylesheet). */
    --lesson-navy: #1e40af;
    --lesson-navy-dark: #142d5c;
    --lesson-crimson: #00E5FF;
    --lesson-gold: #C9A24B;
    --lesson-bg: #FBF9F5;
    --lesson-card-bg: #FFFFFF;
    --lesson-border: #E5DFD3;
    --lesson-text: #22262B;
    --lesson-text-muted: #5B6470;
    --lesson-font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
    --lesson-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

body.lesson-body {
    margin: 0;
    background: var(--lesson-bg);
    color: var(--lesson-text);
    font-family: var(--lesson-font-body);
    line-height: 1.6;
}

/* --- Slim top bar - one job (Part 2.2): carry the real logo, not a six-menu navbar --- */
.lesson-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.5rem;
    background: var(--lesson-navy);
    border-bottom: 3px solid var(--lesson-gold);
}

.lesson-topbar img {
    /* STAGE_29_REPORT.md Part A: static/images/logo.png (686x686) is a real dark-navy circular
       emblem baked into a square, non-transparent canvas - unlike institute_logo.jpg (a light
       rectangular crest), it needs no white background box, and border-radius:50% (checked via a
       real composite render, Part A) clips the square canvas corners down to the artwork's own
       circle rather than showing a mismatched dark square against this topbar's own blue
       background. 48px is the real chosen height - the middle of the requested 40-56px range;
       Part A's own render check found the "RMK / INSTITUTE / LEARN · EARN · GROW" text illegible
       at every size in that range, not just this one - flagged there, not silently fixed here. */
    height: 48px;
    width: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.lesson-topbar span {
    color: #fff;
    font-family: var(--lesson-font-heading);
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

/* --- Stage 37 Part 3: real, role-aware nav - the one real gap base_lesson.html had
   (STAGE_37_REPORT.md Part 1.1/2.1). Lives in the topbar, right-aligned. --- */
.lesson-nav { margin-left: auto; }

.lesson-nav-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

.lesson-nav-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
}

.lesson-nav-links li a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 0.65rem;
    border-radius: 6px;
}

.lesson-nav-links li a:hover { background: rgba(255, 255, 255, 0.15); }

.lesson-nav-links li.lesson-nav-auth a {
    background: var(--lesson-gold);
    color: var(--lesson-navy-dark);
}

.lesson-nav-links li.lesson-nav-auth a:hover { background: #dab463; }

/* Stage 63 Part 2: the real logout control is a POST form, not a link (Django 5.1's LogoutView
   is POST-only) - its button reuses the exact same visual treatment as every other real nav
   link/nav-auth link above, so it reads identically, not as a different kind of control. */
.lesson-nav-logout-form { display: inline-block; margin: 0; }

.lesson-nav-logout-form button {
    display: inline-block;
    font-family: inherit;
    color: #fff;
    background: none;
    border: none;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 0.65rem;
    border-radius: 6px;
    cursor: pointer;
}

.lesson-nav-logout-form button:hover { background: rgba(255, 255, 255, 0.15); }

.lesson-nav-links li.lesson-nav-auth .lesson-nav-logout-form button {
    background: var(--lesson-gold);
    color: var(--lesson-navy-dark);
}

.lesson-nav-links li.lesson-nav-auth .lesson-nav-logout-form button:hover { background: #dab463; }

@media (max-width: 780px) {
    .lesson-topbar { flex-wrap: wrap; }
    .lesson-nav-toggle { display: inline-block; }
    .lesson-nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        gap: 0.15rem;
        margin-top: 0.5rem;
    }
    .lesson-nav-links.open { display: flex; }
}

/* --- Reading column - generous max-width, real line length --- */
.lesson-main {
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.lesson-header {
    /* Stage 39 Part 2: real hierarchy separation - the page's own title block previously ran
       straight into the first card with no visual break at all. */
    margin-bottom: 0.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--lesson-border);
}

.lesson-header h1 {
    font-family: var(--lesson-font-heading);
    color: var(--lesson-navy);
    font-size: 2rem;
    margin: 0 0 0.25rem;
}

.lesson-header .lesson-date {
    color: var(--lesson-text-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* --- Cards - metadata / units / formative / workplace all share this --- */
.lesson-card {
    background: var(--lesson-card-bg);
    border: 1px solid var(--lesson-border);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(22, 48, 92, 0.06);
}

/* Stage 49 Part 3: real Django `messages` feedback (base_lesson.html) - a small accent border
   per message.tags, reusing .lesson-card rather than a new visual language. */
.lesson-message { margin-top: 1.5rem; }
.lesson-message-error { border-left: 4px solid #b91c1c; }
.lesson-message-success { border-left: 4px solid #15803d; }
.lesson-message-info, .lesson-message-warning { border-left: 4px solid var(--lesson-navy); }

.lesson-card h2 {
    font-family: var(--lesson-font-heading);
    color: var(--lesson-navy);
    font-size: 1.35rem;
    margin: 0 0 0.75rem;
}

.lesson-card h3 {
    font-family: var(--lesson-font-heading);
    color: var(--lesson-navy);
    font-size: 1.1rem;
    margin: 1.25rem 0 0.5rem;
}

/* Stage 45 Part 3.3: real per-track section headings on the Module 1 Preview page - Knowledge/
   Practical/Workplace, each independently resolved (training.public_preview.build_module1_preview)
   and rendered as their own real, visually-separated section of cards, not thematically paired. */
.lesson-track-heading {
    font-family: var(--lesson-font-heading);
    color: var(--lesson-navy);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 2.25rem 0 1rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--lesson-navy);
}

.lesson-track-heading:first-of-type { margin-top: 0.5rem; padding-top: 0; border-top: none; }

/* Stage 46 Part 4.3: the real, honest "locked" state on the generalized module-preview page - real
   day/unit titles only, styled to read as genuinely withheld, not broken. */
.lesson-locked-unit {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0;
    border-top: 1px dashed var(--lesson-border);
    color: var(--lesson-text-muted);
}

.lesson-locked-unit:first-child { border-top: none; }

.lesson-locked-icon { font-size: 1rem; opacity: 0.7; }

/* --- Status badge - one of the real get_daily_package statuses --- */
.lesson-status {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.lesson-status.status-lesson { background: #E8F0E3; color: #2F5D34; }
.lesson-status.status-break { background: #FBF1DD; color: #8A6A16; }
/* Real, measured issue found applying Part B's override literally: this badge's text color used
   to be var(--lesson-crimson), which now resolves to --primary (#00E5FF). #00E5FF on ANY light
   background (this pale pink included) measures ~1.5:1 contrast against white - WCAG AA requires
   4.5:1 for normal text, so that text would render essentially invisible. Simplified per Part B's
   own "otherwise simplify" clause: background retinted to a pale blue (was crimson-derived pink,
   now meaningless since crimson is retired) and text set to var(--lesson-navy) (now --secondary,
   #1e40af) - a real, readable ~8:1 contrast on white/pale-blue, not a silent revert of the
   instruction. See STAGE_29_REPORT.md Part B. */
.lesson-status.status-message { background: #E3EEFB; color: var(--lesson-navy); }

/* Stage 64 Part 2: the real per-thread assessment_rollup status badges (my_assessment_rollup.html)
   - reuses the exact same .lesson-status shape above, one modifier per real STATUS_ORDER value
   (training/assessment_rollup.py), progressing from muted grey through to the same real green
   .status-lesson already means "good"/"done" everywhere else on this site. */
.lesson-status.status-not-started { background: #EDEDED; color: #5A5A5A; }
.lesson-status.status-in-progress { background: #FBF1DD; color: #8A6A16; }
.lesson-status.status-submitted { background: #E3EEFB; color: var(--lesson-navy); }
.lesson-status.status-assessed { background: #E8F0E3; color: #2F5D34; }
.lesson-status.status-moderated { background: #DCEEDC; color: #2F5D34; }
.lesson-status.status-complete { background: #E8F0E3; color: #2F5D34; }

/* Stage 64 Part 2: a real, simple progress bar (my_workplace_hours_summary.html) - one real,
   live-computed percentage, no JS, no new colors invented. */
.lesson-progress-track {
    background: #EDEDED;
    border-radius: 999px;
    height: 0.85rem;
    overflow: hidden;
    margin: 0.75rem 0;
}

.lesson-progress-fill {
    background: var(--lesson-navy);
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.lesson-meta {
    font-size: 0.9rem;
    color: var(--lesson-text-muted);
}

.lesson-meta strong { color: var(--lesson-text); }

/* --- Unit content --- */
.lesson-unit + .lesson-unit {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--lesson-border);
}

.lesson-unit .lesson-source-text {
    white-space: pre-line;
    font-size: 1rem;
}

/* Stage 45 Part 3.2 / Stage 48 Part 4: real body text reads better justified - a real, standalone
   rule (not scoped to .lesson-unit) so the same class also justifies real prose on the real
   marketing pages (homepage/About Us/Contact/subscription) rebuilt in Stage 48, not just real
   lesson content. */
.lesson-source-text { text-align: justify; }

.lesson-badge {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--lesson-navy);
    background: #EEF2F8;
    border: 1px solid var(--lesson-border);
    border-radius: 6px;
    padding: 0.15rem 0.5rem;
    margin: 0 0.35rem 0.35rem 0;
}

/* Stage 45 Part 4: the real summary-card + tabs redesign - design signed off in
   STAGE_45_REPORT.md Part 2. Real title + Stage 14's real opening_hook_question stay always
   visible; the 4 real tabs below are native <details>/<summary> (no new JS dependency), each
   carrying its own real "Available"/"Coming soon" badge directly in the closed summary bar - the
   real per-tab availability signal the design called for, visible before anything is expanded. */
.lesson-unit-title { margin: 0 0 0.15rem; }

.lesson-unit-episode-title {
    font-family: var(--lesson-font-heading);
    color: var(--lesson-navy);
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0 0 0.35rem;
}

.lesson-unit-teaser {
    font-style: italic;
    color: var(--lesson-text);
    margin: 0 0 1.1rem;
}

.lesson-unit-tabs {
    border: 1px solid var(--lesson-border);
    border-radius: 8px;
    overflow: hidden;
}

.lesson-tab { border-top: 1px solid var(--lesson-border); }
.lesson-tab:first-child { border-top: none; }

.lesson-tab summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    background: var(--lesson-bg);
    font-family: var(--lesson-font-heading);
    color: var(--lesson-navy);
    font-weight: 600;
    font-size: 0.95rem;
    list-style: none;  /* real, deliberate - the flag badge below is the real disclosure signal, not the browser's default marker */
}

.lesson-tab summary::-webkit-details-marker { display: none; }

.lesson-tab[open] summary { background: var(--lesson-card-bg); border-bottom: 1px solid var(--lesson-border); }

.lesson-tab-label { display: flex; align-items: center; gap: 0.5rem; }

.lesson-tab-icon { font-size: 1.05rem; }

.lesson-tab-flag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
}

.lesson-tab-flag-available { background: #E8F0E3; color: #2F5D34; }
.lesson-tab-flag-soon { background: #F0F0F0; color: var(--lesson-text-muted); }

.lesson-tab-body { padding: 1rem; background: var(--lesson-card-bg); }

/* Stage 45 Part 4: .lesson-episode (the old always-open episode wrapper) was replaced by the real
   tab structure below - .lesson-hook (the real closing cliffhanger text) now sits directly inside
   the Reading tab body instead, so this selector is no longer nested under it. */
.lesson-hook { font-style: italic; }

/* Stage 44: real Stage 15 depth content (ElementEnhancement.categories) - each real category
   gets its own real heading + paragraph, replacing the real, live raw-dict-print bug this stage
   fixed (STAGE_44_REPORT.md). */
.lesson-category { margin: 0.85rem 0; }

.lesson-category-title {
    font-family: var(--lesson-font-heading);
    color: var(--lesson-navy);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.3rem;
}

.lesson-category-text {
    font-size: 0.95rem;
    color: var(--lesson-text);
    text-align: justify;
}

/* Stage 45 Part 1/3.1: .lesson-category-text now holds real markdown output
   (training.templatetags.lesson_content.render_enhancement_markdown) - real <p>/<ul>/<ol>/<hr>
   elements, not a single preformatted text node (white-space:pre-line removed above - superseded
   by this real block structure). Styled to sit flush with the surrounding card, not like a
   generic blog post. */
.lesson-category-text p { margin: 0 0 0.65rem; }
.lesson-category-text p:last-child { margin-bottom: 0; }

.lesson-category-text ul,
.lesson-category-text ol {
    margin: 0 0 0.65rem;
    padding-left: 1.4rem;
}

.lesson-category-text li { margin: 0.2rem 0; }

.lesson-category-text strong { color: var(--lesson-navy); font-weight: 600; }

.lesson-category-text em { font-style: italic; }

.lesson-category-text hr {
    border: none;
    border-top: 1px solid var(--lesson-border);
    margin: 0.85rem 0;
}

/* --- Formative questions --- */
.lesson-question {
    padding: 0.85rem 0;
    border-top: 1px dashed var(--lesson-border);
}

.lesson-question:first-child { border-top: none; }

.lesson-question .q-status {
    font-size: 0.78rem;
    color: var(--lesson-text-muted);
}

.lesson-question .q-revealed {
    margin-top: 0.5rem;
    padding: 0.65rem 0.85rem;
    background: #F4F7F2;
    border-radius: 6px;
    font-size: 0.92rem;
}

/* --- Workplace section --- */
.lesson-workplace-source {
    font-size: 0.85rem;
    color: var(--lesson-text-muted);
    margin-bottom: 0.75rem;
}

/* --- Empty / gate states --- */
.lesson-empty {
    text-align: center;
    color: var(--lesson-text-muted);
    padding: 2rem 1rem;
}

/* --- Stage 31 Part 4: form controls - registration/checkout pages, sharing the same design
   tokens/card system rather than inventing a second visual language. --- */
.lesson-form-group {
    margin-bottom: 1.25rem;
}

.lesson-form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    color: var(--lesson-text);
}

.lesson-select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-family: var(--lesson-font-body);
    font-size: 1rem;
    color: var(--lesson-text);
    background: var(--lesson-card-bg);
    border: 1px solid var(--lesson-border);
    border-radius: 6px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Stage 39 Part 2: real focus state - previously undefined anywhere in this file, so every
   real form field on every real Tier 1 page (registration, checkout, partner portal forms)
   fell back to the browser's own default focus ring, inconsistent page to page and never
   on-brand. Same real navy the rest of the system already uses for interactive state. */
.lesson-select:focus,
.lesson-form-group input:focus,
.lesson-form-group select:focus,
.lesson-form-group textarea:focus {
    outline: none;
    border-color: var(--lesson-navy);
    box-shadow: 0 0 0 0.2rem rgba(30, 64, 175, 0.15);
}

/* Stage 33 Part 4: bare Django-form-rendered inputs/selects (partner_portal_group_form.html
   etc.) pick up the same real styling as .lesson-select without needing a class on every field -
   scoped to .lesson-form-group so nothing outside a real form is affected. */
.lesson-form-group input[type="text"],
.lesson-form-group input[type="date"],
.lesson-form-group input[type="number"],
.lesson-form-group input[type="email"],
.lesson-form-group input[type="password"],
.lesson-form-group input[type="tel"],
.lesson-form-group input[type="url"],
.lesson-form-group select,
.lesson-form-group textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-family: var(--lesson-font-body);
    font-size: 1rem;
    color: var(--lesson-text);
    background: var(--lesson-card-bg);
    border: 1px solid var(--lesson-border);
    border-radius: 6px;
}

.lesson-form-group select[multiple] { min-height: 140px; }

.lesson-radio-group {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.lesson-radio-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
}

.lesson-radio-option input { accent-color: var(--lesson-navy); }

.lesson-price-display {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: #EEF2F8;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.lesson-price-display .price-label {
    font-size: 0.9rem;
    color: var(--lesson-text-muted);
}

.lesson-price-display .price-amount {
    font-family: var(--lesson-font-heading);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--lesson-navy);
}

.lesson-btn {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    font-family: var(--lesson-font-body);
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    /* Stage 39 Part 2: real hover/focus motion - previously an instant color swap only, unlike
       every other real interactive element this stage deepened (tier2.css's own .btn, the QMS
       card grid). */
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.lesson-btn:hover { transform: translateY(-1px); }

.lesson-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(30, 64, 175, 0.25);
}

.lesson-btn-primary {
    background: var(--lesson-navy);
    color: #fff;
}

.lesson-btn-primary:hover { background: var(--lesson-navy-dark); }

.lesson-btn-secondary {
    background: transparent;
    color: var(--lesson-navy);
    border: 1px solid var(--lesson-navy);
}

.lesson-btn-secondary:hover { background: var(--lesson-navy); color: #fff; }

/* Stage 48 Part 3/4: the real, unified 5-step process list (homepage) - real numbered steps,
   consistent navy/cyan styling, replacing the 3 old, inconsistent per-page variants
   (STAGE_48_REPORT.md Part 0A). */
.lesson-steps {
    counter-reset: lesson-step;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lesson-steps li {
    counter-increment: lesson-step;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem 0;
    border-top: 1px dashed var(--lesson-border);
}

.lesson-steps li:first-child { border-top: none; }

.lesson-steps li::before {
    content: counter(lesson-step);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--lesson-navy);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Stage 48 Part 4: a real, simple link list (About Us's own real "SME Support and Training
   Resources" section) - shared styling instead of the old per-link inline onmouseover/style
   bloat. */
.lesson-resource-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lesson-resource-list li { margin: 0; }

.lesson-resource-list a {
    display: block;
    padding: 0.4rem 0.5rem;
    color: var(--lesson-text);
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lesson-resource-list a:hover {
    background: var(--lesson-bg);
    color: var(--lesson-navy);
}

.lesson-order-line {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--lesson-border);
}

.lesson-order-line:last-of-type { border-bottom: none; }

.lesson-order-total {
    display: flex;
    justify-content: space-between;
    padding-top: 0.85rem;
    margin-top: 0.35rem;
    border-top: 2px solid var(--lesson-navy);
    font-weight: 700;
    font-size: 1.15rem;
}

/* Stage 45 Part 5: the real Qualifications landing page's own dedicated card design - real
   NQF/credits badges + real description, genuine visual polish rather than a bare .lesson-card
   with inline flex styling (what this replaced). Same navy/cyan + Fraunces/Inter system as every
   other real page - no second visual language introduced. */
.qualification-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.qualification-card {
    display: flex;
    flex-direction: column;
    background: var(--lesson-card-bg);
    border: 1px solid var(--lesson-border);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(22, 48, 92, 0.06);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.qualification-card:hover {
    box-shadow: 0 6px 18px rgba(22, 48, 92, 0.12);
    transform: translateY(-2px);
}

.qualification-card-title {
    font-family: var(--lesson-font-heading);
    color: var(--lesson-navy);
    font-size: 1.25rem;
    margin: 0 0 0.2rem;
}

/* Stage 46 Part 6.5: the real card title is now also a real link (into the new module-list page)
   - styled to read as part of the heading, not a generic blue link, with an underline only on
   hover/focus as the real interactive affordance. */
.qualification-card-title a {
    color: inherit;
    text-decoration: none;
}

.qualification-card-title a:hover,
.qualification-card-title a:focus {
    text-decoration: underline;
}

.qualification-card-type {
    font-size: 0.85rem;
    color: var(--lesson-text-muted);
    margin: 0 0 0.75rem;
}

.qualification-card-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

.qualification-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--lesson-navy);
    background: #EEF2F8;
    border: 1px solid var(--lesson-border);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
}

.qualification-card-description {
    font-size: 0.92rem;
    color: var(--lesson-text);
    text-align: justify;
    margin: 0 0 1rem;
    flex-grow: 1;
}

.qualification-card-description-empty {
    color: var(--lesson-text-muted);
    font-style: italic;
    text-align: left;
}

.qualification-card-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: auto;
}

.lesson-sandbox-banner {
    background: #FBF1DD;
    color: #8A6A16;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.88rem;
    margin-bottom: 1.5rem;
}

/* --- Stage 33 Part 4: the Partner Admin portal - real tables/stat tiles/wide layout, same
   design tokens as everything else, no second visual language. --- */
.lesson-main-wide {
    max-width: 1080px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.lesson-stat-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.lesson-stat-tile {
    flex: 1 1 180px;
    background: var(--lesson-card-bg);
    border: 1px solid var(--lesson-border);
    border-radius: 10px;
    padding: 1.25rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.lesson-stat-tile:hover {
    box-shadow: 0 4px 14px rgba(22, 48, 92, 0.1);
    transform: translateY(-2px);
}

.lesson-stat-tile .stat-value {
    font-family: var(--lesson-font-heading);
    font-size: 2rem;
    color: var(--lesson-navy);
    display: block;
}

.lesson-stat-tile .stat-label {
    font-size: 0.85rem;
    color: var(--lesson-text-muted);
}

.lesson-table-wrap { overflow-x: auto; }

.lesson-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.lesson-table th {
    text-align: left;
    font-family: var(--lesson-font-heading);
    color: var(--lesson-navy);
    font-weight: 600;
    padding: 0.6rem 0.75rem;
    border-bottom: 2px solid var(--lesson-border);
    white-space: nowrap;
}

.lesson-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--lesson-border);
    vertical-align: top;
}

.lesson-table tr:last-child td { border-bottom: none; }

/* Stage 39 Part 2: real zebra striping + row hover - the Partner Admin portal's own real
   tables (rosters, allocations) are the longest real tables in the system and previously had
   no visual aid for scanning a specific row across columns. */
.lesson-table tbody tr:nth-child(even) { background: #FAFBFC; }
.lesson-table tbody tr:hover { background: #EEF2F8; }

.lesson-nav-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.lesson-nav-tabs a {
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: var(--lesson-card-bg);
    border: 1px solid var(--lesson-border);
    color: var(--lesson-navy);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
}

.lesson-nav-tabs a.active { background: var(--lesson-navy); color: #fff; border-color: var(--lesson-navy); }

.lesson-nav-tabs a { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.lesson-nav-tabs a:not(.active):hover { background: #EEF2F8; border-color: var(--lesson-navy); }

.lesson-inline-form { display: inline-block; }

@media (max-width: 600px) {
    .lesson-main { padding: 1.25rem 1rem 3rem; }
    .lesson-main-wide { padding: 1.25rem 1rem 3rem; }
    .lesson-header h1 { font-size: 1.6rem; }
}