/* =========================================================
   Kubeix terminal page overrides

   Loaded after:
   - main.css
   - terminal-theme.css
   - dashboard.css
   - template-specific styles
   ========================================================= */

:root {
    --terminal-bg: #031411;
    --terminal-bg-deep: #020d0b;
    --terminal-surface: #091c18;
    --terminal-surface-raised: #0c231e;
    --terminal-surface-soft: #0e2822;

    --terminal-grid: rgb(47 224 193 / 6%);
    --terminal-border: rgb(47 224 193 / 20%);
    --terminal-border-strong: rgb(47 224 193 / 42%);

    --terminal-accent: #2fe0c1;
    --terminal-accent-hover: #70efd9;
    --terminal-accent-dark: #04241e;

    --terminal-text: #f3f7f6;
    --terminal-muted: #829790;
    --terminal-dim: #526a63;

    --terminal-success: #2fe0a5;
    --terminal-warning: #f5c451;
    --terminal-danger: #ff6b7a;

    --terminal-mono:
        "IBM Plex Mono",
        "Cascadia Code",
        "SFMono-Regular",
        Consolas,
        monospace;
}

/* =========================================================
   Shared backgrounds
   ========================================================= */

.path-hero,
.courses-section,
.course-detail-page,
.lesson-detail-page,
.quiz-page,
.quiz-result-page,
.academy-dashboard {
    color: var(--terminal-text);
    font-family: Arial, Helvetica, sans-serif;
}

.path-hero,
.courses-section,
.course-detail-page,
.lesson-detail-page,
.quiz-page,
.quiz-result-page,
.academy-dashboard {
    background-color: var(--terminal-bg);
    background-image:
        linear-gradient(
            var(--terminal-grid) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--terminal-grid) 1px,
            transparent 1px
        );
    background-size: 32px 32px;
}

.path-hero,
.course-hero,
.lesson-header,
.dashboard-welcome {
    background:
        radial-gradient(
            circle at 85% 15%,
            rgb(47 224 193 / 8%),
            transparent 32rem
        ),
        rgb(3 20 17 / 94%);
}

.path-hero,
.course-hero,
.lesson-header {
    border-bottom: 1px solid var(--terminal-border);
}

.path-hero .container,
.courses-section .container,
.course-detail-page .container,
.lesson-detail-page .container {
    width: min(calc(100% - 3rem), 1440px);
}

/* =========================================================
   Shared typography
   ========================================================= */

.path-hero h1,
.course-hero h1,
.lesson-header h1,
.course-content h2,
.section-heading h2,
.dashboard-welcome h1,
.dashboard-panel h2,
.dashboard-learning-section h2 {
    color: var(--terminal-text);
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: -0.045em;
}

.eyebrow,
.dashboard-kicker,
.panel-kicker,
.module-number,
.lesson-kicker {
    color: var(--terminal-accent) !important;
    font-family: var(--terminal-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.eyebrow::before,
.dashboard-kicker::before,
.panel-kicker::before {
    content: "// ";
    color: var(--terminal-accent);
}

.path-hero > .container > p:last-child,
.course-description,
.module-heading p,
.lesson-description,
.dashboard-intro {
    color: var(--terminal-muted);
}

/* =========================================================
   Shared links and breadcrumbs
   ========================================================= */

.back-link,
.course-breadcrumbs,
.lesson-breadcrumbs {
    color: var(--terminal-muted);
    font-family: var(--terminal-mono);
    font-size: 0.72rem;
}

.back-link:hover,
.course-breadcrumbs a:hover,
.lesson-breadcrumbs a:hover {
    color: var(--terminal-accent);
}

.course-breadcrumbs span[aria-hidden="true"],
.lesson-breadcrumbs span[aria-hidden="true"] {
    color: var(--terminal-dim);
}

/* =========================================================
   Learning-path page
   ========================================================= */

.path-hero {
    padding: clamp(4rem, 7vw, 7rem) 0;
}

.path-hero .back-link {
    display: inline-flex;
    margin-bottom: 3.5rem;
}

.path-hero .eyebrow {
    margin-bottom: 1.2rem;
}

.path-hero h1 {
    max-width: 1000px;
    margin: 0;
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: 0.95;
}

.path-hero > .container > p:last-child {
    max-width: 760px;
    margin: 2rem 0 0;
    font-size: 1rem;
    line-height: 1.8;
}

.courses-section {
    padding: 4.5rem 0 6rem;
}

.courses-section .section-heading {
    margin-bottom: 2.5rem;
}

.courses-section .section-heading h2 {
    margin: 0.5rem 0 0;
    font-size: clamp(2rem, 4vw, 3.25rem);
}

.course-list {
    display: grid;
    gap: 1rem;
}

.course-card {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
    padding: 2rem;
    background: rgb(9 28 24 / 96%);
    border: 1px solid var(--terminal-border);
    border-radius: 0;
    box-shadow: none;
    transition:
        border-color 160ms ease,
        transform 160ms ease,
        background-color 160ms ease;
}

.course-card:hover {
    transform: translateY(-2px);
    background: var(--terminal-surface-raised);
    border-color: var(--terminal-border-strong);
}

.course-number {
    align-self: start;
    color: var(--terminal-accent);
    font-family: var(--terminal-mono);
    font-size: 1rem;
    font-weight: 700;
}

.course-information h3 {
    margin: 0.9rem 0 0.5rem;
    color: var(--terminal-text);
    font-size: 1.25rem;
}

.course-information > p {
    max-width: 780px;
    margin: 0;
    color: var(--terminal-muted);
}

.course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.course-meta span {
    padding: 0.25rem 0.55rem;
    color: var(--terminal-muted);
    background: transparent;
    border: 1px solid var(--terminal-border);
    border-radius: 0;
    font-family: var(--terminal-mono);
    font-size: 0.64rem;
    text-transform: lowercase;
}

.course-card .card-link {
    width: auto;
    min-width: 145px;
    padding: 0.8rem 1rem;
    color: var(--terminal-accent-dark);
    background: var(--terminal-accent);
    border: 1px solid var(--terminal-accent);
    font-family: var(--terminal-mono);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-align: center;
    text-transform: uppercase;
}

.course-card .card-link:hover {
    color: var(--terminal-accent-dark);
    background: var(--terminal-accent-hover);
}

/* =========================================================
   Course detail
   ========================================================= */

.course-detail-page {
    min-height: calc(100vh - 64px);
    padding: 2rem 0 6rem;
}

.course-breadcrumbs {
    padding: 1rem 0 2rem;
}

.course-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.6fr);
    gap: 3rem;
    align-items: center;
    margin: 0 calc(50% - 50vw);
    padding:
        clamp(3rem, 6vw, 6rem)
        max(1.5rem, calc((100vw - 1440px) / 2));
}

.course-hero-copy {
    max-width: 850px;
}

.course-hero h1 {
    margin: 0.8rem 0 1.4rem;
    font-size: clamp(3rem, 6vw, 5.7rem);
    line-height: 0.95;
}

.course-description {
    max-width: 740px;
    font-size: 1rem;
    line-height: 1.8;
}

.course-hero .course-meta {
    margin-top: 2rem;
}

.course-progress-card {
    padding: 1.6rem;
    background: rgb(9 28 24 / 96%);
    border: 1px solid var(--terminal-border);
    border-radius: 0;
    box-shadow: none;
}

.course-progress-card h2,
.course-progress-card strong {
    color: var(--terminal-text);
}

.course-progress-card p {
    color: var(--terminal-muted);
}

.course-progress-heading span {
    color: var(--terminal-muted);
    font-family: var(--terminal-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
}

.course-progress-heading strong {
    color: var(--terminal-accent);
    font-family: var(--terminal-mono);
}

.progress-track,
.horizontal-progress {
    overflow: hidden;
    background: #05110e;
    border: 1px solid var(--terminal-border);
    border-radius: 0;
}

.progress-fill,
.horizontal-progress span {
    background: var(--terminal-accent);
    border-radius: 0;
}

.primary-button,
.course-progress-card .primary-button {
    color: var(--terminal-accent-dark);
    background: var(--terminal-accent);
    border: 1px solid var(--terminal-accent);
    border-radius: 0;
    font-family: var(--terminal-mono);
    font-size: 0.68rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.primary-button:hover,
.course-progress-card .primary-button:hover {
    color: var(--terminal-accent-dark);
    background: var(--terminal-accent-hover);
}

.course-content {
    padding: 4.5rem 0 0;
}

.course-content .section-heading {
    margin-bottom: 2.5rem;
}

.course-content .section-heading h2 {
    margin: 0.5rem 0 0;
    font-size: clamp(2rem, 4vw, 3.2rem);
}

.course-modules {
    display: grid;
    gap: 1rem;
}

.course-module {
    overflow: hidden;
    background: rgb(9 28 24 / 96%);
    border: 1px solid var(--terminal-border);
    border-radius: 0;
    box-shadow: none;
}

.module-heading {
    padding: 1.7rem 2rem;
    background: var(--terminal-surface);
    border-bottom: 1px solid var(--terminal-border);
}

.module-heading h3 {
    margin: 0.4rem 0 0;
    color: var(--terminal-text);
}

.module-heading p {
    margin-bottom: 0;
}

.module-lesson-count {
    padding: 0.25rem 0.55rem;
    color: var(--terminal-accent);
    background: transparent;
    border: 1px solid var(--terminal-border);
    border-radius: 0;
    font-family: var(--terminal-mono);
    font-size: 0.65rem;
}

.module-lessons {
    background: var(--terminal-bg-deep);
}

.lesson-row {
    color: var(--terminal-text);
    background: transparent;
    border-color: var(--terminal-border);
}

.lesson-row:hover {
    background: rgb(47 224 193 / 5%);
}

.lesson-type-icon {
    color: var(--terminal-accent);
    background: transparent;
    border: 1px solid var(--terminal-border);
    border-radius: 0;
    font-family: var(--terminal-mono);
}

.lesson-title {
    color: var(--terminal-text);
}

.lesson-type-label,
.lesson-row-meta {
    color: var(--terminal-muted);
    font-family: var(--terminal-mono);
    font-size: 0.68rem;
}

.lesson-complete-badge {
    color: var(--terminal-success);
    background: rgb(47 224 165 / 8%);
    border: 1px solid rgb(47 224 165 / 28%);
    border-radius: 0;
}

/* =========================================================
   Lesson detail
   ========================================================= */

.lesson-detail-page {
    min-height: calc(100vh - 64px);
    padding: 2rem 0 6rem;
}

.lesson-breadcrumbs {
    padding: 1rem 0 2rem;
}

.lesson-header {
    margin: 0 calc(50% - 50vw);
    padding:
        clamp(3rem, 6vw, 5.5rem)
        max(1.5rem, calc((100vw - 1440px) / 2));
}

.lesson-header h1 {
    max-width: 1000px;
    margin: 0.8rem 0 1.2rem;
    font-size: clamp(2.8rem, 5.5vw, 5.25rem);
    line-height: 0.98;
}

.lesson-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.lesson-meta span {
    padding: 0.25rem 0.55rem;
    color: var(--terminal-muted);
    background: transparent;
    border: 1px solid var(--terminal-border);
    border-radius: 0;
    font-family: var(--terminal-mono);
    font-size: 0.65rem;
}

.lesson-layout,
.lesson-content-layout {
    gap: 1.5rem;
    padding-top: 2.5rem;
}

.lesson-main,
.lesson-sidebar,
.lesson-content-card,
.lesson-navigation,
.lesson-completion-card {
    background: rgb(9 28 24 / 96%);
    border-color: var(--terminal-border);
    border-radius: 0;
    box-shadow: none;
}

.lesson-content-card,
.lesson-main {
    color: var(--terminal-text);
}

.lesson-content-card h2,
.lesson-content-card h3,
.lesson-content-card h4,
.lesson-main h2,
.lesson-main h3,
.lesson-main h4 {
    color: var(--terminal-text);
}

.lesson-content-card p,
.lesson-content-card li,
.lesson-main p,
.lesson-main li {
    color: #a5b6b0;
}

.lesson-content-card code,
.lesson-main code {
    color: var(--terminal-accent);
    background: #04120f;
    border: 1px solid var(--terminal-border);
    border-radius: 0;
    font-family: var(--terminal-mono);
}

.lesson-content-card pre,
.lesson-main pre {
    color: #c7fff4;
    background: #020a08;
    border: 1px solid var(--terminal-border);
    border-radius: 0;
}

.lesson-content-card pre code,
.lesson-main pre code {
    padding: 0;
    background: transparent;
    border: 0;
}

.lesson-content-card a,
.lesson-main a {
    color: var(--terminal-accent);
}

.lesson-sidebar {
    background: rgb(7 23 19 / 98%);
}

.lesson-sidebar h2,
.lesson-sidebar h3 {
    color: var(--terminal-text);
}

.lesson-sidebar p,
.lesson-sidebar li {
    color: var(--terminal-muted);
}

.lesson-navigation a,
.lesson-action,
.complete-lesson-button {
    color: var(--terminal-accent-dark);
    background: var(--terminal-accent);
    border: 1px solid var(--terminal-accent);
    border-radius: 0;
    font-family: var(--terminal-mono);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.lesson-navigation a:hover,
.lesson-action:hover,
.complete-lesson-button:hover {
    color: var(--terminal-accent-dark);
    background: var(--terminal-accent-hover);
}

/* Embedded video */

.video-wrapper,
.lesson-video,
.video-container {
    overflow: hidden;
    background: #020a08;
    border: 1px solid var(--terminal-border);
    border-radius: 0;
}

/* Lab shell and instructions */

.lab-workspace,
.lab-shell,
.lab-panel,
.lab-instructions,
.lab-terminal-panel {
    background: rgb(7 23 19 / 98%);
    border-color: var(--terminal-border);
    border-radius: 0;
    box-shadow: none;
}

.lab-toolbar,
.terminal-toolbar,
.lab-panel-heading {
    background: var(--terminal-surface);
    border-color: var(--terminal-border);
}

.lab-step {
    background: var(--terminal-bg-deep);
    border-color: var(--terminal-border);
    border-radius: 0;
}

.lab-step-toggle {
    color: var(--terminal-text);
    background: transparent;
}

.lab-step.is-open,
.lab-step:hover {
    border-color: var(--terminal-border-strong);
}

.lab-step-number {
    color: var(--terminal-accent);
    background: transparent;
    border: 1px solid var(--terminal-border);
    border-radius: 0;
    font-family: var(--terminal-mono);
}

.terminal-state.connected {
    color: var(--terminal-success);
}

#terminal,
.xterm,
.xterm-viewport,
.xterm-screen {
    background: #020a08 !important;
}

/* =========================================================
   Dashboard
   ========================================================= */

.academy-dashboard {
    --dashboard-bg: var(--terminal-bg);
    --dashboard-panel: rgb(9 28 24 / 96%);
    --dashboard-panel-light: var(--terminal-surface-raised);
    --dashboard-border: var(--terminal-border);
    --dashboard-blue: var(--terminal-accent);
    --dashboard-cyan: var(--terminal-accent);
    --dashboard-purple: var(--terminal-accent);
    --dashboard-green: var(--terminal-success);
    --dashboard-orange: var(--terminal-warning);
    --dashboard-text: var(--terminal-text);
    --dashboard-muted: var(--terminal-muted);

    padding-top: 2rem;
}

.dashboard-container {
    width: min(calc(100% - 3rem), 1440px);
}

.dashboard-welcome {
    min-height: auto;
    padding: clamp(2.5rem, 5vw, 4.5rem);
    border: 1px solid var(--terminal-border);
    border-radius: 0;
    box-shadow: none;
}

.dashboard-welcome::before,
.dashboard-welcome::after {
    display: none;
}

.dashboard-welcome-copy {
    max-width: 760px;
}

.dashboard-welcome h1 {
    margin-top: 0.7rem;
    font-size: clamp(2.8rem, 5vw, 5rem);
    line-height: 0.98;
}

.dashboard-intro {
    max-width: 680px;
    line-height: 1.75;
}

.dashboard-visual {
    opacity: 0.32;
    filter: grayscale(1) sepia(1) hue-rotate(105deg);
}

.dashboard-button {
    min-height: 44px;
    padding: 0.75rem 1.2rem;
    border-radius: 0;
    font-family: var(--terminal-mono);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dashboard-button-primary {
    color: var(--terminal-accent-dark);
    background: var(--terminal-accent);
    border-color: var(--terminal-accent);
    box-shadow: none;
}

.dashboard-button-primary:hover {
    color: var(--terminal-accent-dark);
    background: var(--terminal-accent-hover);
    box-shadow: none;
}

.dashboard-button-secondary {
    color: var(--terminal-muted);
    background: transparent;
    border-color: var(--terminal-border);
}

.dashboard-button-secondary:hover {
    color: var(--terminal-accent);
    background: transparent;
    border-color: var(--terminal-accent);
}

.dashboard-stat-grid {
    gap: 1rem;
}

.dashboard-stat,
.dashboard-panel,
.dashboard-path-card {
    background: rgb(9 28 24 / 96%);
    border: 1px solid var(--terminal-border);
    border-radius: 0;
    box-shadow: none;
}

.dashboard-stat:hover,
.dashboard-panel:hover,
.dashboard-path-card:hover {
    border-color: var(--terminal-border-strong);
    box-shadow: none;
}

.dashboard-stat {
    min-height: 135px;
}

.dashboard-stat > div:last-child > span,
.dashboard-stat small {
    color: var(--terminal-muted);
    font-family: var(--terminal-mono);
}

.dashboard-stat strong {
    color: var(--terminal-text);
    font-family: var(--terminal-mono);
}

.stat-icon {
    color: var(--terminal-accent) !important;
    background: transparent !important;
    border: 1px solid var(--terminal-border);
    border-radius: 0;
}

.dashboard-main-grid,
.dashboard-secondary-grid {
    gap: 1rem;
}

.panel-heading {
    border-color: var(--terminal-border);
}

.panel-heading h2 {
    color: var(--terminal-text);
}

.panel-heading > a,
.text-action {
    color: var(--terminal-accent);
    font-family: var(--terminal-mono);
}

.progress-ring {
    background:
        radial-gradient(
            closest-side,
            var(--terminal-surface) 78%,
            transparent 80% 100%
        ),
        conic-gradient(
            var(--terminal-accent)
            calc(var(--progress) * 1%),
            #14302a 0
        );
}

.progress-ring::before {
    background: transparent;
}

.progress-ring strong {
    color: var(--terminal-text);
    font-family: var(--terminal-mono);
}

.progress-ring span,
.progress-copy p,
.progress-copy small {
    color: var(--terminal-muted);
}

.continue-card,
.activity-item,
.lab-item,
.recommendation,
.dashboard-empty {
    background: var(--terminal-bg-deep);
    border-color: var(--terminal-border);
    border-radius: 0;
}

.continue-card-icon,
.lab-item-icon,
.path-icon {
    color: var(--terminal-accent);
    background: transparent;
    border: 1px solid var(--terminal-border);
    border-radius: 0;
}

.continue-card-content > span,
.continue-card-content p,
.activity-item span,
.activity-item time,
.lab-item span,
.lab-item p,
.recommendation p,
.dashboard-path-card p {
    color: var(--terminal-muted);
}

.continue-card h3,
.activity-item h3,
.lab-item h3,
.recommendation h3,
.dashboard-path-card h3 {
    color: var(--terminal-text);
}

.activity-marker {
    border-radius: 0;
}

.activity-completed {
    color: var(--terminal-success);
    background: rgb(47 224 165 / 8%);
}

.activity-running {
    color: var(--terminal-accent);
    background: rgb(47 224 193 / 8%);
}

.activity-failed {
    color: var(--terminal-danger);
    background: rgb(255 107 122 / 8%);
}

.lab-item > a {
    color: var(--terminal-accent);
    font-family: var(--terminal-mono);
}

.recommendation-type,
.available-badge,
.path-card-meta span {
    color: var(--terminal-accent);
    background: transparent;
    border: 1px solid var(--terminal-border);
    border-radius: 0;
    font-family: var(--terminal-mono);
}

.dashboard-learning-section {
    border-color: var(--terminal-border);
}

.learning-section-heading > p {
    color: var(--terminal-muted);
}

.dashboard-path-card {
    min-height: 300px;
}

.dashboard-path-card .text-action {
    padding-top: 1rem;
    border-top: 1px solid var(--terminal-border);
}

/* Remove the old bright decorative dashboard colours */

.visual-orbit {
    border-color: var(--terminal-border);
}

.visual-cloud,
.visual-node {
    color: var(--terminal-accent);
    background: var(--terminal-surface);
    border-color: var(--terminal-border);
    box-shadow: none;
}

/* =========================================================
   Quiz pages
   ========================================================= */

.quiz-page,
.quiz-result-page {
    background-color: var(--terminal-bg) !important;
    background-image:
        linear-gradient(
            var(--terminal-grid) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--terminal-grid) 1px,
            transparent 1px
        ) !important;
    background-size: 32px 32px !important;
}

.quiz-card,
.quiz-sidebar-card,
.quiz-result-card,
.quiz-result-sidebar,
.question-card,
.answer-review {
    background: rgb(9 28 24 / 96%) !important;
    border-color: var(--terminal-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.quiz-page h1,
.quiz-page h2,
.quiz-page h3,
.quiz-result-page h1,
.quiz-result-page h2,
.quiz-result-page h3 {
    color: var(--terminal-text) !important;
}

.quiz-page p,
.quiz-result-page p {
    color: var(--terminal-muted);
}

.quiz-page button,
.quiz-result-page .primary-button {
    border-radius: 0 !important;
}

/* =========================================================
   Empty states and messages
   ========================================================= */

.empty-state,
.dashboard-empty {
    color: var(--terminal-muted);
    background: rgb(9 28 24 / 94%);
    border: 1px dashed var(--terminal-border);
    border-radius: 0;
}

.empty-state h2,
.empty-state h3,
.dashboard-empty h2,
.dashboard-empty h3 {
    color: var(--terminal-text);
}

.message {
    border-radius: 0;
}

.message.success {
    color: var(--terminal-success);
    background: rgb(47 224 165 / 8%);
    border-color: rgb(47 224 165 / 28%);
}

.message.error {
    color: var(--terminal-danger);
    background: rgb(255 107 122 / 8%);
    border-color: rgb(255 107 122 / 28%);
}

/* =========================================================
   Responsive layouts
   ========================================================= */

@media (max-width: 1050px) {
    .course-hero {
        grid-template-columns: 1fr;
    }

    .course-progress-card {
        max-width: 600px;
    }

    .course-card {
        grid-template-columns: 55px minmax(0, 1fr);
    }

    .course-card .card-link {
        grid-column: 2;
        justify-self: start;
    }

    .dashboard-visual {
        display: none;
    }
}

@media (max-width: 800px) {
    .path-hero .container,
    .courses-section .container,
    .course-detail-page .container,
    .lesson-detail-page .container,
    .dashboard-container {
        width: min(calc(100% - 2rem), 1440px);
    }

    .path-hero {
        padding: 3.5rem 0;
    }

    .path-hero .back-link {
        margin-bottom: 2.5rem;
    }

    .course-hero,
    .lesson-header {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .course-card {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.4rem;
    }

    .course-card .card-link {
        grid-column: auto;
        justify-self: stretch;
    }

    .module-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
        padding: 1.4rem;
    }

    .lesson-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
    }

    .lesson-row-meta {
        width: 100%;
        justify-content: flex-start;
        padding-left: 3.5rem;
    }

    .dashboard-welcome {
        padding: 2rem 1.4rem;
    }

    .dashboard-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .path-hero h1,
    .course-hero h1,
    .lesson-header h1,
    .dashboard-welcome h1 {
        font-size: 2.7rem;
    }

    .dashboard-stat-grid {
        grid-template-columns: 1fr;
    }

    .course-meta,
    .lesson-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .course-meta span,
    .lesson-meta span {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .course-card,
    .lesson-row,
    .dashboard-stat,
    .dashboard-panel,
    .dashboard-path-card {
        transition: none;
    }
}


/* =========================================================
   Final lesson-page correction
   ========================================================= */

/*
   The lesson header is nested inside .lesson-main, so a
   two-column layout causes the sidebar to float beside it.
   Use one main reading column and place course context below.
*/

.lesson-detail-page .lesson-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    max-width: 1180px;
    margin-inline: auto;
}

.lesson-detail-page .lesson-main {
    min-width: 0;
    width: 100%;
}

/* Keep the lesson heading inside the main content width */

.lesson-detail-page .lesson-header {
    width: 100%;
    margin:
        0
        0
        1.5rem;
    padding: 2.5rem;
    background:
        linear-gradient(
            135deg,
            rgb(47 224 193 / 5%),
            transparent 60%
        ),
        rgb(7 23 19 / 96%);
    border: 1px solid var(--terminal-border);
    border-radius: 0;
}

.lesson-detail-page .lesson-header h1 {
    max-width: 900px;
    margin: 1rem 0 0;
    color: var(--terminal-text);
    font-size: clamp(2.8rem, 6vw, 5rem);
    line-height: 0.96;
    letter-spacing: -0.05em;
}

/* Replace the remaining blue metadata pills */

.lesson-detail-page .lesson-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0;
    color: var(--terminal-muted);
    font-family: var(--terminal-mono);
}

.lesson-detail-page
.lesson-header-meta
> span:not(.lesson-type-badge):not(.lesson-complete-badge) {
    padding: 0.3rem 0.6rem;
    color: var(--terminal-muted);
    background: transparent;
    border: 1px solid var(--terminal-border);
    border-radius: 0;
    font-family: var(--terminal-mono);
    font-size: 0.66rem;
}

.lesson-detail-page .lesson-type-badge {
    padding: 0.3rem 0.6rem;
    color: var(--terminal-accent);
    background: rgb(47 224 193 / 7%);
    border: 1px solid var(--terminal-border-strong);
    border-radius: 0;
    font-family: var(--terminal-mono);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Main article – remove the remaining navy colour */

.lesson-detail-page .lesson-content {
    width: 100%;
    margin-top: 0;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    color: #b5c7c1;
    background:
        linear-gradient(
            135deg,
            rgb(47 224 193 / 2%),
            transparent 55%
        ),
        rgb(7 23 19 / 98%);
    border: 1px solid var(--terminal-border);
    border-radius: 0;
    box-shadow: none;
    font-size: 1.02rem;
    line-height: 1.85;
}

.lesson-detail-page .lesson-content p {
    color: #b5c7c1;
}

.lesson-detail-page .lesson-content h2,
.lesson-detail-page .lesson-content h3,
.lesson-detail-page .lesson-content h4,
.lesson-detail-page .lesson-content strong {
    color: var(--terminal-text);
}

.lesson-detail-page .lesson-content a {
    color: var(--terminal-accent);
}

.lesson-detail-page .lesson-content blockquote {
    margin-inline: 0;
    padding: 1rem 1.25rem;
    color: var(--terminal-muted);
    background: rgb(47 224 193 / 4%);
    border-left: 3px solid var(--terminal-accent);
}

/* Completion card */

.lesson-detail-page .lesson-completion-card,
.lesson-detail-page .completion-card {
    color: var(--terminal-text);
    background: rgb(7 35 29 / 98%);
    border: 1px solid rgb(47 224 193 / 32%);
    border-radius: 0;
    box-shadow: none;
}

.lesson-detail-page .lesson-completion-card p,
.lesson-detail-page .completion-card p {
    color: var(--terminal-muted);
}

/* Previous and next lesson cards */

.lesson-detail-page .lesson-navigation {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.lesson-detail-page .lesson-navigation-link {
    color: var(--terminal-muted);
    background: rgb(7 23 19 / 98%);
    border: 1px solid var(--terminal-border);
    border-radius: 0;
}

.lesson-detail-page .lesson-navigation-link:hover {
    color: var(--terminal-accent);
    background: var(--terminal-surface);
    border-color: var(--terminal-border-strong);
}

.lesson-detail-page .lesson-navigation-link span {
    color: var(--terminal-accent);
    font-family: var(--terminal-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
}

.lesson-detail-page .lesson-navigation-link strong {
    color: var(--terminal-text);
}

/* Course and module context now sits neatly below the lesson */

.lesson-detail-page .lesson-sidebar {
    position: static;
    top: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
}

.lesson-detail-page .lesson-sidebar-card {
    min-width: 0;
    padding: 1.5rem;
    color: var(--terminal-text);
    background:
        linear-gradient(
            135deg,
            rgb(47 224 193 / 4%),
            transparent 65%
        ),
        rgb(7 23 19 / 98%);
    border: 1px solid var(--terminal-border);
    border-radius: 0;
    box-shadow: none;
}

.lesson-detail-page .lesson-sidebar-card .eyebrow {
    margin: 0 0 0.6rem;
    color: var(--terminal-accent);
    font-family: var(--terminal-mono);
    font-size: 0.66rem;
}

.lesson-detail-page .lesson-sidebar-card h2 {
    margin: 0;
    color: var(--terminal-text);
    font-size: 1.15rem;
    line-height: 1.35;
}

.lesson-detail-page .lesson-sidebar-card p {
    margin: 0.7rem 0 0;
    color: var(--terminal-muted);
    font-size: 0.88rem;
    line-height: 1.65;
}

.lesson-detail-page .lesson-sidebar-card .secondary-button {
    display: inline-flex;
    width: auto;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    margin-top: 1.2rem;
    padding: 0.7rem 1rem;
    color: var(--terminal-accent);
    background: transparent;
    border: 1px solid var(--terminal-border-strong);
    border-radius: 0;
    font-family: var(--terminal-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.lesson-detail-page .lesson-sidebar-card .secondary-button:hover {
    color: var(--terminal-accent-dark);
    background: var(--terminal-accent);
    border-color: var(--terminal-accent);
}

/* Remove any old navy surfaces nested inside the lesson */

.lesson-detail-page .lesson-video-section,
.lesson-detail-page .lesson-lab-section,
.lesson-detail-page .lesson-lab-card,
.lesson-detail-page .lab-launch-card,
.lesson-detail-page .lab-workspace-intro,
.lesson-detail-page .lab-task-panel,
.lesson-detail-page .terminal-card {
    background-color: rgb(7 23 19 / 98%);
    border-color: var(--terminal-border);
    border-radius: 0;
    box-shadow: none;
}

/* Mobile layout */

@media (max-width: 760px) {
    .lesson-detail-page .lesson-layout {
        max-width: none;
    }

    .lesson-detail-page .lesson-header {
        padding: 1.5rem;
    }

    .lesson-detail-page .lesson-header h1 {
        font-size: clamp(2.3rem, 12vw, 3.5rem);
    }

    .lesson-detail-page .lesson-sidebar {
        grid-template-columns: 1fr;
    }

    .lesson-detail-page .lesson-content {
        padding: 1.4rem;
        font-size: 0.96rem;
    }
}

/* Keep text visible on turquoise action buttons */
.btn,
.button,
.primary-button,
.lesson-complete-card a,
.lesson-complete-actions a {
    color: #03251f !important;
}

.btn:hover,
.button:hover,
.primary-button:hover,
.lesson-complete-card a:hover,
.lesson-complete-actions a:hover {
    color: #03251f !important;
}

/* =========================================================
   Lab interaction and terminal sizing fixes
   ========================================================= */

/* Make the complete step header the click target and prevent
   inherited global button hover styles from turning it white. */
#lab-steps .lab-step {
    overflow: hidden;
}

#lab-steps .lab-step-toggle {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    min-height: 66px;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
    padding: 0.9rem 1rem;
    color: var(--terminal-text) !important;
    background: var(--terminal-bg-deep) !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

#lab-steps .lab-step-toggle:hover,
#lab-steps .lab-step-toggle:active,
#lab-steps .lab-step-toggle[aria-expanded="true"] {
    color: var(--terminal-text) !important;
    background: var(--terminal-surface) !important;
}

#lab-steps .lab-step-toggle:focus {
    outline: none;
}

#lab-steps .lab-step-toggle:focus-visible {
    outline: 2px solid var(--terminal-accent);
    outline-offset: -2px;
}

/* Child elements must not steal the click from the button. */
#lab-steps .lab-step-toggle > * {
    pointer-events: none;
}

#lab-steps .lab-step-toggle .lab-step-number {
    flex: 0 0 auto;
}

#lab-steps .lab-step-toggle .lab-step-title {
    min-width: 0;
    flex: 1 1 auto;
    color: inherit !important;
}

#lab-steps .lab-step-toggle .lab-step-arrow,
#lab-steps .lab-step-toggle .lab-step-chevron {
    flex: 0 0 auto;
    color: var(--terminal-accent) !important;
}

#lab-steps .lab-step-content[hidden] {
    display: none !important;
}

#lab-steps .lab-step-content {
    color: var(--terminal-text);
    background: var(--terminal-bg-deep);
}

/* Keep xterm inside the middle row of the terminal card. */
#lab-terminal-app,
.terminal-card,
.lab-terminal-panel {
    min-width: 0;
    min-height: 0;
}

#lab-terminal-app {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
}

#lab-terminal-app #terminal {
    position: relative;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

#lab-terminal-app #terminal .xterm {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0.65rem 0.45rem;
    box-sizing: border-box;
}

#lab-terminal-app .xterm-screen,
#lab-terminal-app .xterm-viewport {
    max-width: 100%;
    max-height: 100%;
}

#lab-terminal-app .terminal-footer,
#lab-terminal-app .terminal-statusbar,
#lab-terminal-app .terminal-bottom-bar {
    position: relative;
    z-index: 2;
    min-height: 34px;
    background: #0b1930;
    border-top: 1px solid var(--terminal-border);
}


/* Fix collapsed terminal height */

#lab-terminal-app {
    display: grid;
    grid-template-rows: auto auto auto;
    overflow: hidden;
}

#lab-terminal-app #terminal {
    position: relative;
    width: 100%;
    height: clamp(360px, 55vh, 500px);
    min-height: 360px;
    overflow: hidden;
    box-sizing: border-box;
}

#lab-terminal-app #terminal .xterm {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    box-sizing: border-box;
}

#lab-terminal-app .xterm-screen,
#lab-terminal-app .xterm-viewport {
    max-width: 100%;
    max-height: 100%;
}