:root {
    color: #111827;
    background: #f6f8ff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-synthesis: none;
    --blue: #3261ff;
    --blue-dark: #204ddb;
    --blue-soft: #eef4ff;
    --blue-border: #d6e3ff;
    --ink: #111827;
    --text: #243452;
    --muted: #667b9e;
    --white: #ffffff;
    --canvas: #f6f8ff;
    --success: #238a64;
    --warning: #9a6315;
    --danger: #b53a48;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--canvas);
    color: var(--text);
}

button,
input,
select,
textarea {
    font: inherit;
}

a,
button {
    -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid #e4a250;
    outline-offset: 3px;
}

.topbar {
    min-height: 82px;
    padding: 15px 44px;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    align-items: center;
    gap: 24px;
    background: var(--white);
    border-bottom: 1px solid #e1e9ff;
}

.brand {
    display: flex;
    align-items: center;
    min-width: 0;
    color: var(--blue);
    text-decoration: none;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: 3px;
    white-space: nowrap;
}

.brand-divider {
    width: 1px;
    height: 24px;
    margin: 0 20px;
    background: #dde5ee;
}

.brand-context {
    overflow: hidden;
    color: #536686;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-overflow: ellipsis;
}

.mode-switch {
    display: flex;
    padding: 4px;
    background: #f5f8ff;
    border: 1px solid #d8e4ff;
    border-radius: 28px;
}

.mode-switch a {
    min-width: 108px;
    padding: 9px 15px;
    color: #15203b;
    border-radius: 24px;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
}

.mode-switch a:hover,
.mode-switch a.active {
    color: var(--blue);
    background: var(--white);
    box-shadow: 0 2px 7px rgba(36, 75, 50, 0.06);
}

.prototype {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5275ff;
    font-size: 12px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.prototype-dot,
.live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    background: #3766ff;
    border-radius: 50%;
}

.topbar-account {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.topbar-account-name {
    max-width: 150px;
    overflow: hidden;
    color: #617499;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-logout-form {
    margin: 0;
}

.topbar-signout {
    min-height: 36px;
    padding: 7px 12px;
    color: #243452;
    background: var(--white);
    border: 1px solid #d6e3ff;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 650;
}

.topbar-signout:hover {
    color: var(--blue);
    background: var(--blue-soft);
}

.workspace {
    min-height: calc(100vh - 181px);
    margin: 28px 34px;
    display: grid;
    grid-template-columns: 286px minmax(0, 1fr);
    gap: 24px;
}

.sidebar,
.main-column,
.login-panel {
    background: var(--white);
    border: 1px solid var(--blue-border);
    border-radius: 28px;
}

.sidebar {
    min-height: 0;
    padding: 25px 20px 20px;
    display: flex;
    flex-direction: column;
}

.eyebrow {
    margin: 0 0 15px;
    color: #3563ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.lesson-heading h1 {
    margin: 0;
    color: #101725;
    font-size: 28px;
    font-weight: 750;
    letter-spacing: -1px;
    line-height: 1.14;
}

.lesson-heading p:not(.eyebrow) {
    margin: 12px 0 0;
    color: #5b6e91;
    font-size: 14px;
    line-height: 1.55;
}

.course-card {
    margin: 22px 0;
    padding: 14px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f5f8ff;
    border: 1px solid #d8e4ff;
    border-radius: 8px;
}

.course-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--blue);
    background: var(--white);
    border: 1px solid var(--blue-border);
    border-radius: 9px;
    font-size: 18px;
    font-weight: 800;
}

.course-card strong,
.course-card small {
    display: block;
}

.course-card strong {
    color: #15213a;
    font-size: 15px;
}

.course-card small {
    margin-top: 4px;
    color: #5b6e91;
    font-size: 12px;
    line-height: 1.4;
}

.asset-tag {
    margin-left: auto;
    padding: 4px 6px;
    color: #315dff;
    background: var(--white);
    border: 1px solid var(--blue-border);
    border-radius: 5px;
    font-size: 10px;
    letter-spacing: .08em;
}

.section-title {
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.section-title h2 {
    margin: 0;
    color: #17213a;
    font-size: 16px;
}

.section-title span {
    color: #7484a1;
    font-size: 12px;
}

.step-list {
    display: grid;
    gap: 8px;
}

.step-link {
    padding: 10px 8px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    color: #1d2c49;
    border: 1px solid transparent;
    border-radius: 11px;
    text-decoration: none;
}

.step-link:hover,
.step-link.current {
    color: var(--blue);
    background: #eef5ff;
}

.step-number {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #6e7c9d;
    background: var(--white);
    border: 1px solid #dce6ff;
    border-radius: 50%;
    font-size: 11px;
}

.step-link.current .step-number {
    color: var(--blue);
}

.step-copy {
    min-width: 0;
}

.step-copy strong,
.step-copy small {
    display: block;
}

.step-copy strong {
    font-size: 13px;
    line-height: 1.25;
}

.step-copy small {
    margin-top: 3px;
    overflow: hidden;
    color: #7484a1;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-bottom {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid #d8e4ff;
}

.prototype-note {
    margin: 0 0 14px;
    padding: 12px;
    color: #5b6f92;
    background: #f8faff;
    border: 1px solid #e2eaff;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.55;
}

.main-column {
    min-width: 0;
    overflow: hidden;
}

.scene-toolbar {
    min-height: 82px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--white);
    border-bottom: 1px solid #d8e4ff;
}

.scene-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.scene-title strong {
    color: var(--ink);
    font-size: 20px;
}

.toolbar-secondary,
.scene-meta {
    color: #617499;
    font-size: 13px;
}

.scene-meta {
    white-space: nowrap;
}

.lesson-content,
.dashboard-content {
    padding: 30px;
}

.lesson-content h1,
.dashboard-content h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(29px, 4vw, 46px);
    letter-spacing: -1.5px;
    line-height: 1.08;
}

.summary {
    max-width: 72ch;
    margin: 14px 0 24px;
    color: #5b6e91;
    font-size: 17px;
    line-height: 1.65;
}

.body-copy {
    max-width: 78ch;
    color: #263855;
    font-size: 16px;
    line-height: 1.8;
}

.badge-row {
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.badge {
    padding: 6px 10px;
    color: #3459d9;
    background: #f2f6ff;
    border: 1px solid #d8e4ff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.badge.warning {
    color: var(--warning);
    background: #fff9ee;
    border-color: #f1dfbd;
}

.progress-card {
    margin: 24px 0;
    padding: 18px;
    background: #fcfdff;
    border: 1px solid #dfe8ff;
    border-radius: 14px;
}

.progress-meta {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    color: #667b9e;
    font-size: 13px;
}

.progress-track {
    height: 8px;
    overflow: hidden;
    background: #e8efff;
    border-radius: 999px;
}

.progress-fill {
    height: 100%;
    width: var(--progress, 0%);
    background: var(--blue);
    border-radius: inherit;
}

.dashboard-grid {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.dashboard-workspace {
    grid-template-columns: 310px minmax(0, 1fr);
}

.curriculum-sidebar {
    padding-bottom: 18px;
}

.curriculum-title {
    margin-top: 26px;
}

.curriculum-list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 5px;
    list-style: none;
}

.curriculum-subject {
    min-height: 43px;
    padding: 8px 9px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    color: #52688e;
    border: 1px solid transparent;
    border-radius: 10px;
}

.curriculum-subject.current {
    color: #1c47ce;
    background: #eef4ff;
    border-color: #cddcff;
}

.subject-code {
    color: #7384a3;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
}

.curriculum-subject.current .subject-code {
    color: var(--blue);
}

.subject-name {
    color: inherit;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
}

.current-marker {
    color: var(--blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.dashboard-calm {
    max-width: 1260px;
    margin: 0 auto;
    padding-block: 24px;
}

.dashboard-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
}

.dashboard-intro .summary {
    margin-bottom: 0;
    font-size: 15px;
}

.dashboard-intro h1 {
    font-size: clamp(30px, 3.4vw, 42px);
}

.progress-summary {
    width: 104px;
    height: 104px;
    display: grid;
    place-content: center;
    flex: 0 0 auto;
    color: var(--blue);
    background: #f7f9ff;
    border: 7px solid #dce6ff;
    border-radius: 50%;
    text-align: center;
}

.progress-summary strong,
.progress-summary span {
    display: block;
}

.progress-summary strong {
    color: var(--ink);
    font-size: 25px;
    letter-spacing: -1px;
}

.progress-summary span {
    margin-top: 2px;
    color: #6e7f9f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.curriculum-path {
    margin-top: 18px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    overflow-x: auto;
    background: #f8faff;
    border: 1px solid #dfe8ff;
    border-radius: 13px;
}

.path-item {
    min-width: 0;
}

.path-item small,
.path-item strong {
    display: block;
    white-space: nowrap;
}

.path-item small {
    margin-bottom: 3px;
    color: var(--blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.path-item strong {
    color: #23324e;
    font-size: 11px;
}

.path-arrow {
    color: #9aabc8;
}

.placement-note,
.scope-note {
    color: #7484a1;
    font-size: 11px;
    line-height: 1.55;
}

.placement-note {
    margin: 7px 3px 14px;
}

.current-module {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 310px);
    gap: 28px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid #d8e4ff;
    border-radius: 20px;
}

.module-copy {
    padding: 22px 0 22px 24px;
}

.module-copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(25px, 2.7vw, 34px);
    letter-spacing: -1px;
    line-height: 1.12;
}

.module-copy > p:not(.eyebrow) {
    max-width: 64ch;
    margin: 12px 0 0;
    color: #5b6e91;
    font-size: 14px;
    line-height: 1.65;
}

.module-progress {
    margin-top: 18px;
}

.continue-row {
    margin-top: 17px;
    padding-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-top: 1px solid #e2eaff;
}

.continue-row small,
.continue-row strong {
    display: block;
}

.practice-tools {
    margin-top: 18px;
    padding: 22px 24px;
    background: var(--white);
    border: 1px solid var(--blue-border);
    border-radius: 20px;
}

.practice-tools-heading,
.practice-tool-card,
.practice-tool-actions {
    display: flex;
    align-items: center;
}

.practice-tools-heading {
    justify-content: space-between;
    gap: 20px;
}

.practice-tools-heading .eyebrow {
    margin-bottom: 6px;
}

.practice-tools-heading h2,
.practice-tool-copy h3 {
    margin: 0;
    color: var(--ink);
}

.practice-tools-heading h2 {
    font-size: 21px;
    letter-spacing: -.4px;
}

.practice-tool-card {
    margin-top: 18px;
    padding-top: 18px;
    gap: 16px;
    border-top: 1px solid #e2eaff;
}

.practice-tool-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--blue);
    background: var(--blue-soft);
    border: 1px solid var(--blue-border);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
}

.practice-tool-copy {
    min-width: 0;
    flex: 1;
}

.practice-tool-copy h3 {
    font-size: 17px;
}

.practice-tool-copy p {
    margin: 5px 0 0;
    color: #667b9e;
    font-size: 13px;
    line-height: 1.5;
}

.practice-tool-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.continue-row small {
    margin-bottom: 5px;
    color: #7484a1;
    font-size: 11px;
}

.continue-row strong {
    color: #21304d;
    font-size: 14px;
}

.sfo-reference-card {
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #f5f8ff;
    border-left: 1px solid #d8e4ff;
}

.sfo-reference-card img {
    width: 100%;
    max-height: 275px;
    display: block;
    object-fit: contain;
    background: var(--white);
    border: 1px solid #dce5f5;
    border-radius: 12px;
}

.sfo-reference-card figcaption,
.lesson-reference figcaption {
    margin-top: 10px;
    color: #6a7b99;
    font-size: 10px;
    line-height: 1.55;
}

.scope-note {
    margin: 14px 3px 0;
}

/* Role-aware authenticated dashboard */
.portal-shell {
    width: min(1180px, calc(100% - 48px));
    min-height: calc(100vh - 178px);
    margin: 32px auto 46px;
}

.portal-hero {
    padding: 34px 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    background: var(--white);
    border: 1px solid var(--blue-border);
    border-radius: 24px;
}

.portal-hero .eyebrow,
.portal-section-heading .eyebrow {
    margin-bottom: 9px;
}

.portal-hero h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(30px, 4vw, 46px);
    letter-spacing: -1.6px;
    line-height: 1.08;
}

.portal-hero p:not(.eyebrow) {
    max-width: 880px;
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
}

.role-pill {
    padding: 9px 13px;
    flex: 0 0 auto;
    color: var(--blue);
    background: var(--blue-soft);
    border: 1px solid var(--blue-border);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.portal-section {
    margin-top: 18px;
    padding: 26px;
    background: var(--white);
    border: 1px solid var(--blue-border);
    border-radius: 20px;
}

.portal-section-heading {
    margin-bottom: 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.portal-section-heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: 23px;
    letter-spacing: -.5px;
}

.portal-section-heading > span {
    color: var(--muted);
    font-size: 12px;
}

.portal-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.portal-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.portal-library-group {
    min-width: 0;
    padding: 18px;
    background: #fbfcff;
    border: 1px solid #dce6ff;
    border-radius: 16px;
}

.portal-library-group h3 {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: 15px;
}

.portal-library-row {
    padding: 11px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: var(--ink);
    text-decoration: none;
    border-top: 1px solid #e6ecfb;
}

.portal-library-row:hover b {
    text-decoration: underline;
}

.portal-library-row span,
.portal-library-row strong,
.portal-library-row small {
    display: block;
}

.portal-library-row strong {
    font-size: 13px;
}

.portal-library-row small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
}

.portal-library-row b {
    flex: 0 0 auto;
    color: var(--blue);
    font-size: 11px;
}

.portal-empty {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.portal-review-list {
    display: grid;
    gap: 10px;
}

.portal-review-row {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: #fbfcff;
    border: 1px solid #dce6ff;
    border-radius: 14px;
}

.portal-review-row strong,
.portal-review-row small {
    display: block;
}

.portal-review-row strong {
    color: var(--ink);
    font-size: 14px;
}

.portal-review-row small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 10px;
}

.portal-review-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

/* On a phone the actions go under the title instead of past the screen edge. */
@media (max-width: 760px) {
    .portal-review-row { flex-wrap: wrap; }
    .portal-review-actions { justify-content: flex-start; }
}

.portal-review-actions form {
    margin: 0;
}

.portal-review-actions .button,
.portal-review-actions .button-secondary {
    min-height: 38px;
    padding: 9px 13px;
    cursor: pointer;
    font: inherit;
}

.portal-action-card {
    min-width: 0;
    padding: 20px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    background: #fbfcff;
    border: 1px solid #dce6ff;
    border-radius: 16px;
}

.portal-action-card.primary {
    background: #f3f6ff;
    border-color: #cbd9ff;
}

.portal-action-card-wide {
    grid-template-columns: 52px minmax(0, 1fr) auto;
}

.portal-card-code,
.portal-course-icon {
    display: grid;
    place-items: center;
    color: var(--blue);
    background: var(--white);
    border: 1px solid var(--blue-border);
    border-radius: 13px;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .08em;
}

.portal-card-code {
    width: 52px;
    height: 52px;
}

.portal-action-card h3,
.portal-course-card h3 {
    margin: 0;
    color: var(--ink);
}

.portal-action-card h3 {
    font-size: 18px;
}

.portal-action-card p,
.portal-course-card p {
    color: var(--muted);
    line-height: 1.55;
}

.portal-action-card p {
    margin: 6px 0 0;
    font-size: 13px;
}

.portal-action-card .button,
.portal-action-card .button-secondary {
    width: fit-content;
    margin-top: 4px;
    grid-column: 2;
}

.portal-action-card-wide .button,
.portal-action-card-wide .button-secondary {
    margin-top: 0;
    grid-column: auto;
}

.portal-course-card {
    padding: 22px;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    background: #fbfcff;
    border: 1px solid #dce6ff;
    border-radius: 16px;
}

.portal-course-card + .portal-course-card {
    margin-top: 14px;
}

/* Courses grouped under their programme */
.programme-group {
    padding: 22px;
    background: var(--blue-soft);
    border: 1px solid var(--blue-border);
    border-radius: 18px;
}

.programme-group + .programme-group {
    margin-top: 22px;
}

.programme-heading {
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.programme-heading .eyebrow {
    margin-bottom: 6px;
}

.programme-heading h3 {
    margin: 0;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.35;
}

.programme-heading .badge {
    flex-shrink: 0;
}

.programme-group .portal-course-card {
    background: var(--white);
}

.programme-empty {
    padding: 16px 18px;
    background: var(--white);
    border: 1px dashed var(--blue-border);
    border-radius: 14px;
}

.portal-course-icon {
    width: 62px;
    height: 62px;
    font-size: 15px;
}

.portal-course-copy {
    min-width: 0;
}

.portal-course-copy .badge-row {
    margin-bottom: 10px;
}

.portal-course-copy h3 {
    font-size: 20px;
    letter-spacing: -.3px;
}

.portal-course-copy > p {
    margin: 7px 0 0;
    font-size: 12px;
}

.portal-course-path {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    color: #496080;
    font-size: 11px;
    font-weight: 650;
}

.student-course-card {
    align-items: start;
}

.student-course-card .module-progress {
    max-width: 650px;
}

.portal-course-action {
    min-width: 175px;
    align-self: center;
    text-align: right;
}

.portal-course-action small {
    margin-bottom: 9px;
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.portal-unavailable {
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

.lesson-reference {
    width: min(520px, 100%);
    margin: 28px 0 0;
    padding: 18px;
    background: #f8faff;
    border: 1px solid #d8e4ff;
    border-radius: 18px;
}

.lesson-reference img {
    width: 100%;
    max-height: 620px;
    display: block;
    object-fit: contain;
    background: var(--white);
    border-radius: 12px;
}

.dashboard-step {
    min-height: 108px;
    padding: 16px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    color: #1d2c49;
    background: var(--white);
    border: 1px solid #dce6ff;
    border-radius: 13px;
    text-decoration: none;
}

.dashboard-step:hover {
    color: var(--blue);
    background: #f8faff;
    border-color: #bfcfff;
}

.dashboard-step strong,
.dashboard-step small {
    display: block;
}

.dashboard-step small {
    margin-top: 6px;
    color: #7484a1;
    line-height: 1.45;
}

.flashcards {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

.flashcard {
    min-height: 174px;
    cursor: pointer;
    perspective: 1000px;
}

.flashcard-inner {
    position: relative;
    min-height: 174px;
    transition: transform .55s ease;
    transform-style: preserve-3d;
}

.flashcard.is-flipped .flashcard-inner {
    transform: rotateY(180deg);
}

.flashcard-face {
    position: absolute;
    inset: 0;
    padding: 22px;
    display: grid;
    place-items: center;
    color: #14203a;
    background: #f8faff;
    border: 1px solid #d8e4ff;
    border-radius: 18px;
    backface-visibility: hidden;
    text-align: center;
    line-height: 1.55;
}

.flashcard-face::before {
    content: "LEARNING CARD";
    position: absolute;
    top: 14px;
    left: 16px;
    color: var(--blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.flashcard-back {
    color: #26416a;
    background: #eef4ff;
    transform: rotateY(180deg);
}

.quiz {
    margin-top: 30px;
    padding: 22px;
    background: #fcfdff;
    border: 1px solid #d8e4ff;
    border-radius: 18px;
}

.quiz h2 {
    margin: 0 0 18px;
    color: #14203a;
    font-size: 20px;
}

.choices {
    display: grid;
    gap: 10px;
}

.choice,
.button,
.button-secondary {
    border: 1px solid #d6e3ff;
    border-radius: 8px;
    cursor: pointer;
}

.choice {
    width: 100%;
    padding: 13px 15px;
    color: #243452;
    background: var(--white);
    text-align: left;
}

.choice:hover {
    background: #eef4ff;
}

.choice.correct {
    color: #176447;
    background: #edf9f4;
    border-color: #9ddbc4;
}

.choice.incorrect {
    color: #96313e;
    background: #fff2f4;
    border-color: #e9a8b0;
}

.feedback {
    display: none;
    margin-top: 14px;
    color: #52688e;
    line-height: 1.65;
}

.feedback.visible {
    display: block;
}

.lesson-footer {
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fcfdff;
    border-top: 1px solid #e3ebff;
}

.button,
.button-secondary {
    min-height: 40px;
    padding: 9px 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 650;
}

.button {
    color: var(--white);
    background: var(--blue);
    border-color: var(--blue);
}

.button:hover {
    background: var(--blue-dark);
}

.button-secondary {
    color: #243452;
    background: var(--white);
}

.button-secondary:hover {
    color: var(--blue);
    background: #eef4ff;
}

.button.disabled {
    pointer-events: none;
    opacity: .45;
}

.login-shell {
    position: relative;
    min-height: 100vh;
    padding: 48px clamp(20px, 6vw, 96px);
    display: grid;
    grid-template-columns: minmax(0, 620px) minmax(320px, 460px);
    justify-content: center;
    align-items: center;
    gap: clamp(40px, 5vw, 80px);
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 18%, rgba(50, 97, 255, .10), transparent 28%),
        linear-gradient(145deg, #f8faff 0%, var(--canvas) 54%, #eef4ff 100%);
}

/* Faint whiteboard grid that fades out towards the edges. */
.login-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(50, 97, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(50, 97, 255, .07) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: center;
    -webkit-mask-image: radial-gradient(ellipse at 60% 50%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse at 60% 50%, #000 0%, transparent 75%);
    pointer-events: none;
}

.login-intro,
.login-panel {
    position: relative;
    z-index: 1;
}

.login-intro {
    max-width: 620px;
}

.login-wordmark {
    margin: 0 0 32px;
    color: var(--blue);
    font-size: clamp(28px, 2.6vw, 38px);
    font-weight: 800;
    letter-spacing: 6px;
    line-height: 1;
}

.login-intro h1 {
    margin: 0 0 20px;
    color: var(--ink);
    font-size: clamp(34px, 4.2vw, 56px);
    letter-spacing: -1.6px;
    line-height: 1.06;
}

.login-lede {
    margin: 0 0 40px;
    max-width: 520px;
    color: var(--text);
    font-size: 18px;
    line-height: 1.55;
}

.login-features {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 22px;
}

.login-features li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.login-feature-mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--blue);
    background: var(--white);
    border: 1px solid var(--blue-border);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
}

.login-features strong {
    display: block;
    margin-bottom: 3px;
    color: var(--ink);
    font-size: 16px;
}

.login-features span {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
}

.login-panel {
    width: 100%;
    padding: 40px 40px 44px;
    overflow: hidden;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 24px 70px rgba(37, 67, 138, .12);
}

.login-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--blue) 0%, #7d9aff 68%, transparent 100%);
}

.login-panel h2 {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 28px;
    letter-spacing: -.6px;
}

.login-panel-hint {
    margin: 0 0 28px;
    color: var(--muted);
    font-size: 14px;
}

.login-form {
    display: grid;
    gap: 20px;
}

.login-form label {
    display: grid;
    gap: 7px;
    color: #52688e;
    font-size: 13px;
    font-weight: 650;
}

.login-form input {
    width: 100%;
    min-height: 52px;
    padding: 13px 14px;
    color: #263855;
    background: var(--white);
    border: 1px solid #d8e4ff;
    border-radius: 10px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.login-form input:hover {
    border-color: #b8caff;
}

.login-form .button {
    min-height: 52px;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(50, 97, 255, .20);
    font-size: 16px;
}

.form-errors {
    margin-bottom: 16px;
    padding: 12px 14px;
    color: #96313e;
    background: #fff2f4;
    border: 1px solid #e9a8b0;
    border-radius: 10px;
}

.helper {
    margin: 16px 0 0;
    color: #7484a1;
    font-size: 12px;
    line-height: 1.5;
}

.site-footer {
    padding: 0 34px 22px;
    color: #7184a5;
    font-size: 11px;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}

@media (max-width: 980px) {
    .login-shell {
        grid-template-columns: minmax(0, 1fr);
        align-content: center;
        justify-items: start;
    }

    .login-panel {
        max-width: 520px;
    }

    .topbar {
        grid-template-columns: 1fr auto;
        padding-inline: 22px;
    }

    .mode-switch {
        grid-row: 2;
        grid-column: 1 / -1;
        justify-self: center;
    }

    .topbar-account {
        grid-row: 1;
        grid-column: 2;
    }

    .workspace {
        margin: 20px;
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 15px;
    }

    .dashboard-workspace {
        grid-template-columns: 270px minmax(0, 1fr);
    }

    .current-module {
        grid-template-columns: 1fr;
    }

    .module-copy {
        padding: 24px;
    }

    .sfo-reference-card {
        border-top: 1px solid #d8e4ff;
        border-left: 0;
    }

    .sfo-reference-card img {
        max-height: 290px;
    }

    .portal-card-grid {
        grid-template-columns: 1fr;
    }

    .portal-library-grid {
        grid-template-columns: 1fr;
    }

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

    .portal-course-card > .button-secondary,
    .portal-course-action,
    .portal-unavailable {
        grid-column: 2;
        justify-self: start;
        text-align: left;
    }
}

@media (max-width: 760px) {
    .topbar {
        display: flex;
        flex-wrap: wrap;
        padding: 16px;
    }

    .brand {
        width: auto;
        flex: 0 1 auto;
        font-size: 20px;
    }

    .topbar-account {
        order: 2;
        margin-left: auto;
    }

    .mode-switch {
        order: 3;
        width: 100%;
    }

    .mode-switch a {
        flex: 1;
        min-width: 0;
    }

    .prototype {
        margin-left: auto;
    }

    .workspace {
        min-height: auto;
        margin: 16px;
        grid-template-columns: 1fr;
    }

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

    .sidebar {
        max-height: none;
    }

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

    .dashboard-intro {
        align-items: center;
    }

    .portal-shell {
        width: min(100% - 28px, 1180px);
        margin-top: 18px;
    }

    .portal-hero {
        padding: 26px 22px;
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .portal-section {
        padding: 21px 18px;
    }

    .portal-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .portal-action-card,
    .portal-action-card-wide,
    .portal-course-card {
        grid-template-columns: 1fr;
    }

    .portal-action-card .button,
    .portal-action-card .button-secondary,
    .portal-action-card-wide .button,
    .portal-action-card-wide .button-secondary,
    .portal-course-card > .button-secondary,
    .portal-course-action,
    .portal-unavailable {
        grid-column: 1;
        justify-self: stretch;
        text-align: left;
    }

    .portal-action-card .button,
    .portal-action-card .button-secondary,
    .portal-course-card > .button-secondary,
    .portal-course-action .button {
        width: 100%;
        text-align: center;
    }

    .progress-summary {
        width: 96px;
        height: 96px;
        border-width: 7px;
    }

    .progress-summary strong {
        font-size: 23px;
    }

    .continue-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .practice-tools-heading,
    .practice-tool-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .practice-tool-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .scene-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .lesson-content,
    .dashboard-content {
        padding: 24px 20px;
    }

    .login-shell {
        padding: 36px 18px;
        gap: 36px;
    }

    .login-shell::before {
        opacity: .6;
    }

    .login-wordmark {
        margin-bottom: 18px;
    }

    .login-lede {
        margin-bottom: 28px;
        font-size: 16px;
    }

    .login-panel {
        padding: 32px 24px 28px;
    }
}

@media (max-width: 480px) {
    .brand-divider,
    .brand-context {
        display: none;
    }

    .topbar-account-name {
        display: none;
    }
}

/* Airfield Familiarization course chooser */
.af-course-shell {
    display: grid;
    gap: 22px;
    /* Rows keep their own height; the shell's min-height must not stretch them. */
    align-content: start;
}

.af-course-hero {
    align-items: center;
}

.af-course-review {
    width: fit-content;
    margin: 0;
    padding: 8px 12px;
    color: #7a4b00;
    background: #fff4d6;
    border: 1px solid #efd28a;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 750;
}

.af-course-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.af-course-module {
    display: grid;
    gap: 12px;
    min-height: 230px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(22, 42, 78, .06);
}

.af-course-module:last-child {
    grid-column: 1 / -1;
}

.af-course-module-in_progress {
    border-color: var(--accent);
    box-shadow: 0 10px 28px rgba(23, 105, 224, .13);
}

.af-course-module-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.af-course-number {
    color: var(--accent);
    font: 800 18px var(--mono);
}

.af-course-status {
    padding: 6px 9px;
    color: var(--muted);
    background: #f5f8ff;
    border: 1px solid #d8e4ff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 750;
}

.af-course-module-completed .af-course-status {
    color: #14532d;
    background: #e9f7ef;
    border-color: #9ed4b3;
}

.af-course-module h2,
.af-course-module p {
    margin: 0;
}

.af-course-module h2 {
    font-size: 22px;
}

.af-course-module p {
    color: var(--muted);
    line-height: 1.55;
}

.af-course-module .button,
.af-course-module .button-secondary {
    align-self: end;
    justify-self: start;
}

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

    .af-course-module:last-child {
        grid-column: auto;
    }
}

/* Course editor (ADR 0017) */
.editor-messages {
    margin-bottom: 18px;
    display: grid;
    gap: 8px;
}

.editor-message {
    margin: 0;
    padding: 12px 14px;
    color: #1f5132;
    background: #effaf3;
    border: 1px solid #a9dcbc;
    border-radius: 10px;
    font-size: 14px;
}

.editor-message-error {
    color: #96313e;
    background: #fff2f4;
    border-color: #e9a8b0;
}

.editor-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.editor-actions form {
    margin: 0;
}

.editor-draft-actions {
    margin-bottom: 18px;
}

.editor-status .scope-note {
    margin: 0 0 14px;
}

.button-danger {
    color: var(--danger);
}

.editor-exercise + .editor-exercise {
    margin-top: 12px;
}

.editor-form {
    max-width: 640px;
    display: grid;
    gap: 20px;
}

.editor-form label {
    display: grid;
    gap: 7px;
    color: #52688e;
    font-size: 13px;
    font-weight: 650;
}

.editor-form input,
.editor-form select,
.editor-form textarea {
    width: 100%;
    padding: 12px 14px;
    color: #263855;
    background: var(--white);
    border: 1px solid #d8e4ff;
    border-radius: 10px;
}

.editor-form input:hover,
.editor-form textarea:hover {
    border-color: #b8caff;
}

.editor-form small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

.editor-options {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    border: 0;
}

.editor-options legend {
    margin-bottom: 7px;
    color: #52688e;
    font-size: 13px;
    font-weight: 650;
}

.editor-options legend small {
    margin-left: 6px;
}

.editor-option {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.editor-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--blue);
}

.editor-map-form {
    max-width: none;
}

.editor-map-group {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.editor-map-group legend {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
}

.editor-select-all {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
}

.editor-map-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 6px 14px;
}

.editor-form .editor-check {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #263855;
    font-size: 13px;
    font-weight: 500;
}

.editor-form .editor-check input {
    width: 16px;
    height: 16px;
    padding: 0;
    accent-color: var(--blue);
}

/* Matches the breakpoint where course cards drop their action column. */
@media (max-width: 980px) {
    .editor-exercise .editor-actions {
        grid-column: 2;
    }
}

/* Lessons (ADR 0018) */
.lesson-step-list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    list-style: none;
}

.lesson-step-list a {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--ink);
    background: #fbfcff;
    border: 1px solid #dce6ff;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
}

.lesson-step-list a:hover {
    border-color: #b8caff;
}

.lesson-step-number {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--blue);
    background: var(--white);
    border: 1px solid var(--blue-border);
    border-radius: 10px;
    font-size: 13px;
}

.lesson-step-list .done .lesson-step-number {
    color: #1d7a46;
    border-color: #a9dcbc;
}

.lesson-body {
    max-width: 760px;
    margin: 26px 0;
    color: var(--text);
    font-size: 16px;
    line-height: 1.65;
}

.lesson-body h2,
.lesson-body h3,
.lesson-body h4 {
    margin: 1.4em 0 .5em;
    color: var(--ink);
}

.lesson-body table {
    border-collapse: collapse;
}

.lesson-body th,
.lesson-body td {
    padding: 6px 10px;
    border: 1px solid var(--blue-border);
}

.lesson-body blockquote {
    margin: 1em 0;
    padding: 4px 16px;
    color: var(--muted);
    border-left: 3px solid var(--blue-border);
}

.lesson-navigation {
    justify-content: space-between;
}

.editor-step-layout {
    display: grid;
    grid-template-columns: minmax(0, 640px) minmax(220px, 300px);
    align-items: start;
    gap: 28px;
}

.editor-cheatsheet {
    padding: 16px 18px;
    background: var(--blue-soft);
    border: 1px solid var(--blue-border);
    border-radius: 14px;
    font-size: 13px;
}

.editor-cheatsheet h3 {
    margin: 0 0 10px;
    font-size: 14px;
}

.editor-cheatsheet dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 12px;
}

.editor-cheatsheet dd {
    margin: 0;
    color: var(--muted);
}

.editor-cheatsheet p {
    margin: 12px 0 0;
    color: var(--muted);
}

@media (max-width: 980px) {
    .editor-step-layout {
        grid-template-columns: 1fr;
    }
}

/* Lesson animations and the scene editor (ADR 0018) */
.lesson-scene {
    position: relative;
    margin: 22px 0;
}

.scene-canvas {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--blue-border);
    border-radius: 18px;
}

.scene-bg-blank { fill: #f8fafc; }
.scene-bg-sky { fill: #e6f0ff; }
.scene-note { fill: #6b7c93; font: 600 12px var(--sans, sans-serif); }

.scene-obj-aircraft { fill: var(--ink); stroke: #ffffff; stroke-width: 2; }
.scene-obj-detail { fill: #64748b; }
.scene-obj-line { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.scene-obj-rotor { fill: rgba(100, 116, 139, .12); stroke: #64748b; stroke-width: 1.5; }
.scene-obj-blade { stroke: #475569; stroke-width: 3; stroke-linecap: round; }
.scene-obj-runway { fill: #4b5563; }
/* Gavere chart backgrounds: the Traffic Board's colours (board.css) */
.scene-map-tma { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 3; }
.scene-map-ctr { fill: none; stroke: rgba(255, 255, 255, .92); stroke-width: 2.5; stroke-dasharray: 14 10; }
.scene-map-zone { fill: #ffffff; font: 700 14px var(--sans, sans-serif); text-anchor: middle; dominant-baseline: hanging; }
.scene-map-runway { stroke: #3f4549; }
.scene-map-taxiway { fill: none; stroke: #7b8288; stroke-linecap: round; stroke-linejoin: round; }
.scene-map-taxiway-line { fill: none; stroke: #e8b923; stroke-width: 1; }
.scene-map-apron { fill: #b9bec2; }
.scene-map-building { fill: #5f676c; }
.scene-map-label { fill: #1f2937; font: 700 12px var(--mono, monospace); text-anchor: middle; dominant-baseline: middle; }
.scene-map-source { text-anchor: end; }
.scene-obj-centreline { stroke: #ffffff; stroke-width: 2; stroke-dasharray: 14 10; }
.scene-obj-threshold { fill: #ffffff; }
.scene-obj-tower { fill: #94a3b8; }
.scene-obj-tower-cab { fill: #334155; }
.scene-obj-cloud { fill: #ffffff; stroke: #cbd5e1; stroke-width: 1.5; }
.scene-obj-arrow { stroke: var(--blue); stroke-width: 6; stroke-linecap: round; }
.scene-obj-arrowhead { fill: var(--blue); }
.scene-obj-label-box { fill: #ffffff; stroke: var(--blue-border); stroke-width: 1.5; }
.scene-obj-label-text { fill: var(--ink); font: 700 16px var(--sans, sans-serif); text-anchor: middle; }
.scene-obj-marker { fill: #fff7e6; stroke: var(--warning); stroke-width: 3; }
.scene-obj-marker-text { fill: #6b4a12; font: 700 14px var(--sans, sans-serif); text-anchor: middle; }

/* The card sits below the scene so it never covers an aircraft. */
.scene-card {
    margin-top: 12px;
    padding: 18px 20px;
    background: #fffaf0;
    border: 1px solid #f0d9a8;
    border-left: 5px solid var(--warning);
    border-radius: 14px;
}

.scene-card-title {
    margin: 0;
    color: var(--ink);
}

.scene-card-body {
    margin: 10px 0 14px;
    font-size: 15px;
}

.scene-controls {
    margin-top: 12px;
}

.scene-palette {
    margin-bottom: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.scene-background-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #52688e;
    font-size: 13px;
    font-weight: 650;
}

.scene-background-choice select {
    padding: 8px 10px;
    border: 1px solid #d8e4ff;
    border-radius: 8px;
}

.scene-editor-layout {
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 20px;
}

.scene-editor-canvas {
    touch-action: none;
}

.scene-editor-canvas .scene-object {
    cursor: grab;
}

.scene-selection {
    fill: none;
    stroke: var(--blue);
    stroke-width: 2;
    stroke-dasharray: 6 5;
}

.scene-moment-bar {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: #52688e;
    font-size: 13px;
    font-weight: 650;
}

.scene-moments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.scene-moment-button {
    width: 36px;
    height: 36px;
    color: var(--blue);
    background: var(--white);
    border: 1px solid var(--blue-border);
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}

.scene-moment-button.active {
    color: var(--white);
    background: var(--blue);
    border-color: var(--blue);
}

.scene-moment-button.has-card {
    box-shadow: inset 0 -3px 0 var(--warning);
}

.editor-scene-panel {
    padding: 16px 18px;
    display: grid;
    gap: 16px;
    background: var(--blue-soft);
    border: 1px solid var(--blue-border);
    border-radius: 14px;
}

.editor-scene-panel h3 {
    margin: 0 0 10px;
    font-size: 15px;
}

.editor-scene-panel .editor-form {
    max-width: none;
    gap: 12px;
}

/* Class display rules must not override the hidden attribute in the editor. */
.editor-scene-panel [hidden] {
    display: none;
}

@media (max-width: 980px) {
    .scene-editor-layout {
        grid-template-columns: 1fr;
    }
}


/* Lesson steps in the learning-moment layout: completed moments */
.step-link.done .step-number {
    color: #1d7a46;
    border-color: #a9dcbc;
}

.lesson-footer form {
    margin: 0;
}

/* Learning cards and quick check on lesson steps */
.editor-extras {
    display: grid;
    gap: 18px;
    margin: 6px 0 4px;
}

.editor-extras-group {
    margin: 0;
    padding: 14px 16px;
    display: grid;
    gap: 10px;
    background: #fbfcff;
    border: 1px solid #dce6ff;
    border-radius: 12px;
}

.editor-extras-group legend {
    padding: 0 4px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}

.editor-extras-group legend small {
    margin-left: 6px;
    color: var(--muted);
    font-weight: 400;
}

.editor-card-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 8px;
}

/* Lesson images */
.lesson-image {
    width: min(760px, 100%);
}

.lesson-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

.lesson-image figcaption {
    font-size: 13px;
}

.editor-image-current {
    margin: 0;
    display: grid;
    gap: 8px;
}

.editor-image-current img {
    max-width: 260px;
    border: 1px solid var(--blue-border);
    border-radius: 8px;
}

/* "+" and "×" rows for learning cards and quick-check answers */
.editor-card-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 36px;
    align-items: center;
}

.editor-extras-group .editor-option {
    grid-template-columns: 22px minmax(0, 1fr) 36px;
}

.editor-remove {
    width: 32px;
    height: 32px;
    color: var(--danger);
    background: var(--white);
    border: 1px solid var(--blue-border);
    border-radius: 8px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.editor-add {
    justify-self: start;
    min-height: 34px;
    padding: 0 12px;
    font-size: 13px;
}

.editor-repeat-rows,
.editor-check-fields {
    display: grid;
    gap: 8px;
}

.editor-check-fields[hidden],
.editor-extras-group [hidden] {
    display: none;
}

.editor-hint {
    margin: 4px 0 6px;
    color: #52688e;
    font-size: 13px;
    font-weight: 650;
}

/* Route editor (ADR 0018) */

.scene-palette .button {
    min-height: 34px;
    padding: 0 12px;
    font-size: 13px;
}

.scene-route-bar,
.scene-player-bar {
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

#scene-draw-route.active {
    color: var(--white);
    background: var(--warning);
    border-color: var(--warning);
}

.scene-hint {
    color: #52688e;
    font-size: 13px;
}

#scene-time {
    flex: 1 1 200px;
    accent-color: var(--blue);
}

.scene-speeds {
    display: inline-flex;
    border: 1px solid var(--blue-border);
    border-radius: 8px;
    overflow: hidden;
}

.scene-speeds button {
    padding: 6px 10px;
    color: #52688e;
    background: var(--white);
    border: 0;
    cursor: pointer;
}

.scene-speeds button.on {
    color: var(--white);
    background: var(--blue);
}

.scene-editor-stage {
    margin: 0;
}

.scene-editor-canvas.drawing {
    cursor: crosshair;
}

.scene-route {
    fill: none;
    stroke: rgba(50, 97, 255, .35);
    stroke-width: 2;
    stroke-dasharray: 8 6;
}

.scene-route.selected {
    stroke: var(--blue);
    stroke-width: 3;
}

.scene-point circle {
    fill: var(--white);
    stroke: var(--blue);
    stroke-width: 3;
    cursor: grab;
}

.scene-point.has-card circle {
    stroke: var(--warning);
}

.scene-point.selected circle {
    fill: var(--blue);
}

.scene-point text {
    fill: var(--ink);
    font: 700 11px var(--sans, sans-serif);
    text-anchor: middle;
    pointer-events: none;
}

.scene-point.selected text {
    fill: var(--white);
}

.editor-inline-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.scene-playing .scene-palette,
.scene-playing .scene-route-bar,
.scene-playing .editor-scene-panel {
    opacity: .4;
    pointer-events: none;
}

/* Button display rules must not override the hidden attribute in the scene editor. */
.scene-player-bar [hidden],
.scene-editor-layout [hidden] {
    display: none;
}

/* Aircraft data label (altitude, speed, configuration) */
.scene-tag-box { fill: rgba(17, 24, 39, .82); }
.scene-tag-text { fill: #e5edff; font: 600 12px var(--sans, sans-serif); }
.scene-tag-text.strong { fill: #ffffff; font-weight: 800; }

/* Waypoint popover and leg "+" handles (Komoot-style editing) */
.scene-editor-stage {
    position: relative;
}

/* The selected waypoint's panel, at the top of the editor's right column. */
.scene-popover {
    padding: 12px 14px;
    display: grid;
    gap: 8px;
    background: var(--white);
    border: 2px solid var(--blue);
    border-radius: 12px;
}

.scene-popover[hidden] {
    display: none;
}

.scene-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.scene-popover label {
    display: grid;
    gap: 4px;
    color: #52688e;
    font-size: 12px;
    font-weight: 650;
}

.scene-popover input,
.scene-popover select,
.scene-popover textarea {
    width: 100%;
    padding: 7px 9px;
    color: #263855;
    background: var(--white);
    border: 1px solid #d8e4ff;
    border-radius: 8px;
}

.scene-insert circle {
    fill: var(--white);
    stroke: rgba(50, 97, 255, .6);
    stroke-width: 1.5;
    cursor: copy;
}

.scene-insert text {
    fill: var(--blue);
    font: 800 12px var(--sans, sans-serif);
    text-anchor: middle;
    pointer-events: none;
}

.scene-point-data {
    fill: #1f2a44;
    font: 700 12px var(--sans, sans-serif);
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 4px;
    stroke-linejoin: round;
}

/* Side-view pictures have a white background; multiply blends it away on
   any scene background. */
.scene-side-picture {
    mix-blend-mode: multiply;
}

/* Interactive altimeter (ADR 0018) */
.lesson-altimeter {
    margin: 22px 0;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
    align-items: start;
    gap: 18px;
}

.altimeter-instrument {
    display: grid;
    gap: 10px;
    justify-items: center;
}

.altimeter-dial {
    width: 100%;
    max-width: 380px;
    height: auto;
}

.altimeter-face { mix-blend-mode: multiply; }
.altimeter-hand path { fill: #f4f2ea; stroke: #1f2329; stroke-width: 2; }
.altimeter-hand-small path { fill: #f4f2ea; }
.altimeter-hub { fill: #1b1e22; stroke: #3a3f45; stroke-width: 4; }
.altimeter-window { fill: #f4f2ea; font: 700 34px ui-monospace, Menlo, monospace; text-anchor: middle; letter-spacing: 4px; }
.altimeter-knob { fill: rgba(255, 255, 255, 0); cursor: ns-resize; }
.altimeter-knob:hover { fill: rgba(255, 255, 255, .08); stroke: rgba(255, 255, 255, .35); stroke-width: 3; }

.altimeter-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.altimeter-setting {
    color: var(--ink);
    font-size: 17px;
    font-weight: 800;
    text-align: center;
}

.altimeter-help {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.altimeter-sea { fill: #bcd7f5; }
.altimeter-terrain { fill: #cfe3c6; stroke: #9cbf8e; stroke-width: 2; }
.altimeter-obstacle { fill: #b7a58a; stroke: #8c7a5f; stroke-width: 2; }
.altimeter-label { fill: #374151; font: 700 20px var(--sans, sans-serif); }
.altimeter-label.centre { text-anchor: middle; }
.altimeter-label.end { text-anchor: end; }
.altimeter-label.zero { fill: var(--warning); }
.altimeter-label.reading { fill: var(--blue); font-weight: 800; }
.altimeter-zero { stroke: var(--warning); stroke-width: 2.5; stroke-dasharray: 10 7; }
.altimeter-reading-line { stroke: var(--blue); stroke-width: 3; }
.altimeter-amsl-line { stroke: #64748b; stroke-width: 2; stroke-dasharray: 5 5; }
.altimeter-warning { fill: var(--danger); font: 800 24px var(--sans, sans-serif); text-anchor: middle; }

@media (max-width: 980px) {
    .lesson-altimeter {
        grid-template-columns: 1fr;
    }
}

.altimeter-side .scene-note {
    font-size: 18px;
}

/* Zones, wake vortices and traffic alerts */
.scene-obj-zone { fill-opacity: .16; stroke-width: 3; }
.scene-vortex-ring { fill: none; stroke: #6366f1; stroke-width: 2.5; }
.scene-vortex.danger .scene-vortex-ring { stroke: var(--danger); stroke-width: 3.5; }
.scene-traffic-ring { fill: rgba(211, 47, 47, .08); stroke: var(--danger); stroke-width: 3; stroke-dasharray: 8 5; }
.scene-traffic-text { fill: var(--danger); font: 800 15px var(--sans, sans-serif); text-anchor: middle; letter-spacing: 1px; }

.scene-traffic-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #52688e;
    font-size: 13px;
    font-weight: 650;
}

.scene-traffic-choice .editor-check {
    display: flex;
    align-items: center;
    gap: 6px;
}

.scene-traffic-range { display: inline-flex; align-items: center; gap: 6px; }
.scene-traffic-range[hidden] { display: none; }
.scene-traffic-help { color: #6b7c93; font-weight: 500; }
.scene-traffic-preview { fill: rgba(211, 47, 47, .06); stroke: var(--danger); stroke-width: 2; stroke-dasharray: 8 6; pointer-events: none; }

/* "+ Aircraft", "+ Buildings", ...: choosing an item adds it. */
.scene-add-select {
    width: 140px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--blue-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--blue);
    font: 700 13px var(--sans, sans-serif);
    cursor: pointer;
}

/* Illustrations (ADR 0018): plain, flat drawings, not exact likenesses. */
.scene-bg-mountains { fill: #b9c6d8; }
.scene-obj-snow { fill: #ffffff; }
.scene-obj-roof { fill: #8a97a8; stroke: #5f6b7a; stroke-width: 2; }
.scene-obj-roof-line { stroke: #6f7b8b; stroke-width: 1.5; }
.scene-obj-roof-inner { fill: #a7b1bf; }
.scene-obj-door { fill: #475569; }
.scene-obj-door-line { stroke: #64748b; stroke-width: 1.5; }
.scene-obj-concrete { fill: #b6ad9c; stroke: #857c6c; stroke-width: 2; }
.scene-obj-wall { fill: #d9cbb3; stroke: #8d7f68; stroke-width: 2; }
.scene-obj-window { fill: #9fc3e6; }
.scene-obj-taxiway { fill: #6b7280; }
.scene-obj-taxi-line { stroke: #f5c518; stroke-width: 2; }
.scene-obj-pole { stroke: #475569; stroke-width: 3; stroke-linecap: round; }
.scene-obj-pole-top { fill: #475569; }
.scene-obj-sock { fill: #f08c00; }
.scene-obj-sock-stripe { fill: #ffffff; }
.scene-obj-cb { fill: #eef1f5; stroke: #94a3b8; stroke-width: 2; }
.scene-obj-cb-base { fill: #64748b; }
.scene-obj-fog { fill: rgba(226, 232, 240, .85); }
.scene-obj-rain { stroke: #3b82c4; stroke-width: 2.5; stroke-linecap: round; }
.scene-obj-rain-cloud { fill: #94a3b8; }
.scene-obj-sun { fill: #f5c518; stroke: #e0a800; stroke-width: 2; }
.scene-obj-sun-ray { stroke: #f5c518; stroke-width: 4; stroke-linecap: round; }
.scene-obj-mountain { fill: #8b8f99; stroke: #6b6f78; stroke-width: 2; }
.scene-obj-contour { fill: rgba(139, 115, 85, .12); stroke: #8b7355; stroke-width: 1.5; }
.scene-obj-peak { fill: #6b5a44; }
.scene-obj-hill { fill: #6f9a4f; }
.scene-obj-hill-contour { fill: rgba(80, 120, 50, .15); stroke: #55803a; stroke-width: 1.5; }
.scene-obj-trunk { fill: #7a5a3a; }
.scene-obj-crown { fill: #3f7d3a; stroke: #2f5f2b; stroke-width: 1.5; }

/* "+ Picture…" opens the file chooser; the input itself stays out of sight. */
.scene-add-picture {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--blue-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--blue);
    font: 700 13px var(--sans, sans-serif);
    cursor: pointer;
}
.scene-add-picture input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.scene-add-picture:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.scene-picture-status { align-self: center; color: #52688e; font-size: 13px; font-weight: 600; }

/* Lesson video: a button first, the YouTube player only after a click. */
.lesson-video { margin: 22px 0; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0f172a; }
.lesson-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.lesson-video-load {
    width: 100%; height: 100%; border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 16px;
    background: radial-gradient(circle at 50% 40%, #1e293b, #0f172a); color: #ffffff; text-align: left;
}
.lesson-video-load strong { display: block; font-size: 18px; }
.lesson-video-load small { display: block; color: #cbd5e1; font-size: 13px; margin-top: 4px; }
.lesson-video-play {
    width: 64px; height: 64px; border-radius: 50%; background: #e11d48;
    display: inline-flex; align-items: center; justify-content: center; font-size: 24px; padding-left: 4px;
}
.lesson-video-load:focus-visible { outline: 3px solid var(--blue); outline-offset: -6px; }

.lesson-links { margin: 22px 0; padding: 16px 20px; border: 1px solid var(--blue-border); border-radius: 14px; background: #f8fbff; }
.lesson-links ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.lesson-links a { color: var(--blue); font-weight: 700; text-decoration: none; }
.lesson-links a:hover { text-decoration: underline; }
.lesson-links small { color: #6b7c93; margin-left: 6px; }

/* ---------- Exams (ADR 0019) ---------- */
.exam-new-form, .exam-schedule-form { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--blue-border); border-radius: 14px; background: #f8fbff; }
.exam-new-form h3, .exam-schedule-form h3 { margin: 0 0 4px; }
.exam-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.exam-questions { display: grid; gap: 14px; }
.exam-question { padding: 16px 18px; border: 1px solid var(--blue-border); border-radius: 14px; background: #ffffff; display: grid; gap: 10px; }
.exam-question-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.exam-question-tools { margin-left: auto; display: inline-flex; gap: 6px; }
.exam-question-tools .button-secondary { min-height: 32px; padding: 0 10px; }
.exam-points-label { display: inline-flex !important; align-items: center; gap: 6px; font-size: 13px; }
.exam-points { width: 70px !important; }
.exam-options { display: grid; gap: 8px; }
.exam-add-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.exam-facts { display: grid; gap: 8px; margin: 0 0 16px; }
.exam-facts div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; }
.exam-facts dt { color: #6b7c93; font-weight: 700; }
.exam-facts dd { margin: 0; }
.exam-notice { padding: 16px 18px; border-radius: 14px; background: #f1f7ff; border: 1px solid var(--blue-border); }
.exam-notice p { margin: 6px 0 0; }

.exam-timer {
    position: sticky; top: 12px; z-index: 5; margin: 0 0 16px auto; width: fit-content;
    display: flex; align-items: baseline; gap: 10px; padding: 10px 16px;
    border: 1px solid var(--blue-border); border-radius: 12px; background: #ffffff; box-shadow: 0 6px 20px rgba(15, 23, 42, .08);
}
.exam-timer strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.exam-timer small { color: #6b7c93; }
.exam-timer-low strong { color: var(--danger); }
.exam-timer-problem small { color: var(--danger); font-weight: 700; }
.exam-take-question { border: 1px solid var(--blue-border); display: grid; gap: 8px; }
.exam-take-question legend { display: grid; gap: 6px; padding: 0; float: left; width: 100%; margin-bottom: 8px; }
.exam-take-prompt { font-size: 18px; font-weight: 700; color: var(--ink); }
.exam-choice { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #dbe5f5; border-radius: 10px; cursor: pointer; }
.exam-choice:has(input:checked) { border-color: var(--blue); background: #f1f6ff; }
.exam-fill { max-width: 360px; min-height: 40px; padding: 0 12px; border: 1px solid #c9d6ee; border-radius: 10px; font-size: 16px; }
.exam-submit-row { align-items: center; }

.exam-table-wrap { overflow-x: auto; }
.exam-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.exam-table th, .exam-table td { padding: 10px 12px; border-bottom: 1px solid #e3eaf6; text-align: left; white-space: nowrap; }
.exam-table th { color: #6b7c93; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.exam-result-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.exam-result-summary strong { font-size: 20px; }
.exam-review-item { padding: 14px 16px; border: 1px solid var(--blue-border); border-left-width: 5px; border-radius: 12px; margin-bottom: 12px; }
.exam-review-item.correct { border-left-color: #2e9d4b; }
.exam-review-item.incorrect { border-left-color: var(--danger); }
.exam-review-points { margin-left: auto; font-weight: 800; }
.exam-option-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.exam-option-row.exam-option-text { grid-template-columns: 1fr auto; }
.exam-question-tools { flex-wrap: nowrap; }
/* The exam editor uses the full page width, like its title block. */
#exam-form { max-width: none; gap: 0; }
#exam-form > .portal-section { display: grid; gap: 16px; }
#exam-form > .portal-section > .portal-section-heading { margin-bottom: 2px; }
#exam-form > .editor-actions { margin-top: 18px; }
.exam-add-row .button-secondary, .exam-options .editor-add { min-height: 36px; padding: 0 14px; font-size: 14px; justify-self: start; }
.exam-option-row input[type="radio"], .exam-option-row input[type="checkbox"] { width: 18px; height: 18px; padding: 0; accent-color: var(--blue); }
.exam-open { width: 100%; max-width: none; min-height: 160px; padding: 12px; line-height: 1.5; }
.exam-word-count { color: #6b7c93; }
.exam-word-count-over { color: var(--danger); font-weight: 700; }
.exam-review-item.partial { border-left-color: var(--warning); }
.exam-review-item.pending { border-left-color: var(--blue); background: #f8fbff; }
.exam-answer-text { white-space: normal; }
.exam-grade-form { display: grid; grid-template-columns: 160px 1fr auto; align-items: end; gap: 12px; max-width: none; margin-top: 10px; }
.exam-history { margin-top: 10px; color: #52688e; font-size: 13px; }
.exam-history summary { cursor: pointer; font-weight: 700; }
.exam-history ul { margin: 8px 0 0; padding-left: 18px; }
.exam-row-actions { display: grid; gap: 4px; }
.exam-retake summary { cursor: pointer; color: var(--blue); font-weight: 700; }
.exam-retake form { margin-top: 8px; gap: 8px; min-width: 240px; white-space: normal; }
.exam-release { margin-top: 16px; display: grid; gap: 8px; }
.exam-retake-notice { margin-top: 12px; }
.exam-correction .exam-options { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
@media (max-width: 700px) { .exam-grade-form { grid-template-columns: 1fr; } }
.exam-grade-form label { display: grid; gap: 6px; color: #52688e; font-size: 13px; font-weight: 650; }
.exam-grade-form input, .exam-grade-form textarea { width: 100%; padding: 10px 12px; color: #263855; background: var(--white); border: 1px solid #d8e4ff; border-radius: 10px; font: inherit; font-size: 15px; }
.editor-form .exam-choice { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 15px; font-weight: 500; }
.editor-form .exam-choice input { width: 18px; height: 18px; padding: 0; accent-color: var(--blue); }
.exam-correction legend { color: #52688e; font-size: 13px; font-weight: 650; margin-bottom: 6px; }
.exam-number { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #52688e; }
.exam-number .exam-fill { width: 200px; }
.exam-dnd { display: grid; gap: 10px; }
.exam-dnd-bank { display: flex; flex-wrap: wrap; gap: 8px; min-height: 52px; padding: 10px; border: 1px dashed #c9d6ee; border-radius: 12px; background: #f8fbff; color: #6b7c93; font-size: 13px; align-items: center; }
.exam-dnd-slot { display: grid; grid-template-columns: minmax(80px, 1fr) 2fr; align-items: center; gap: 12px; }
.exam-dnd-label { font-weight: 700; color: var(--ink); }
.exam-dnd-select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.exam-dnd-zone { min-height: 48px; padding: 6px; border: 2px dashed #c9d6ee; border-radius: 12px; background: #ffffff; color: #9aa9c0; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.exam-dnd-zone.waiting { border-color: var(--blue); background: #f1f6ff; color: var(--blue); }
.exam-dnd-card { padding: 9px 14px; border: 1px solid var(--blue-border); border-radius: 10px; background: #ffffff; color: var(--ink); font: inherit; font-weight: 650; cursor: grab; touch-action: none; box-shadow: 0 2px 6px rgba(15, 23, 42, .06); }
.exam-dnd-card.chosen { border-color: var(--blue); background: var(--blue); color: #ffffff; }
.exam-dnd-zone .exam-dnd-card { width: 100%; text-align: left; }
.exam-dnd-ghost { position: fixed; z-index: 50; pointer-events: none; transform: translate(-50%, -50%); opacity: .9; }
.exam-fill-table input { width: 100%; min-width: 110px; }
.exam-fill-table td { white-space: normal; }
@media (max-width: 600px) { .exam-dnd-slot { grid-template-columns: 1fr; gap: 4px; } }
.exam-inline-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.exam-pair-row { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 8px; }
.exam-pair-arrow { color: #6b7c93; font-weight: 800; }
.exam-table-editor th, .exam-table-editor td { white-space: normal; vertical-align: top; min-width: 150px; }
.exam-table-editor th { display: table-cell; }
.exam-table-editor th .editor-remove { margin-top: 4px; }
.exam-table-editor td:last-child, .exam-table-editor th:last-child { min-width: 0; }
.exam-cell-open input { border-color: var(--blue) !important; background: #f1f6ff !important; }
.editor-form .exam-cell-toggle { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; text-transform: none; letter-spacing: 0; }
.editor-form .exam-cell-toggle input { width: 16px; height: 16px; padding: 0; }
.exam-dnd-zone { display: flex; align-items: center; }
.exam-picture { position: relative; margin: 0; max-width: 760px; border: 1px solid var(--blue-border); border-radius: 12px; overflow: hidden; background: #ffffff; }
.exam-picture img { display: block; width: 100%; height: auto; }
.exam-pin { position: absolute; transform: translate(-50%, -50%); min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px; background: var(--blue); color: #ffffff; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #ffffff, 0 4px 10px rgba(15, 23, 42, .25); }
.exam-map { border: 1px solid var(--blue-border); border-radius: 12px; overflow: hidden; background: #9cc27a; }
.exam-map-svg { display: block; width: 100%; aspect-ratio: 16 / 10; cursor: grab; touch-action: none; }
.exam-map-grass { fill: #9cc27a; }
.exam-map-apron .exam-map-surface { fill: #b8bcc2; stroke: #8f949b; stroke-width: 3; }
.exam-map-taxiway .exam-map-surface { fill: none; stroke: #7b8088; stroke-linecap: round; stroke-linejoin: round; }
.exam-map-runway .exam-map-surface { fill: none; stroke: #4b5563; }
.exam-map-object .exam-map-surface { fill: #e5e7eb; stroke: #6b7280; stroke-width: 3; }
.exam-map-hit { fill: none; stroke: transparent; stroke-linecap: round; }
.exam-map-shape.clickable { cursor: pointer; }
.exam-map-shape.clickable:hover .exam-map-surface { filter: brightness(1.15); }
.exam-map-shape.selected .exam-map-surface { stroke: var(--blue); }
.exam-map-apron.selected .exam-map-surface, .exam-map-object.selected .exam-map-surface { fill: #9db8ff; stroke-width: 8; }
.exam-map-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; background: #ffffff; border-top: 1px solid var(--blue-border); }
.exam-map-tools .button-secondary { min-height: 34px; padding: 0 12px; }
.exam-map-status { color: #52688e; font-size: 13px; font-weight: 650; }
.exam-picture-editor { cursor: crosshair; }
.exam-pin-inline { position: static; transform: none; box-shadow: none; }
.exam-map-chosen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.exam-map-chosen .badge { display: inline-flex; align-items: center; gap: 6px; }
.exam-map-chosen .editor-remove { min-height: 22px; width: 22px; padding: 0; }
.exam-release .button-secondary { justify-self: start; }

/* ---------- In-app administration (ADR 0020) ---------- */
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.admin-tile { display: grid; gap: 6px; padding: 20px; border: 1px solid var(--blue-border); border-radius: 16px; background: #f8fbff; color: var(--ink); text-decoration: none; }
a.admin-tile:hover { border-color: var(--blue); background: #f1f6ff; }
.admin-tile strong { font-size: 18px; }
.admin-tile span { color: var(--blue); font-weight: 700; font-size: 14px; }
.admin-tile small { color: #52688e; }
.admin-tile-later { opacity: .6; }
.admin-hero-actions { display: flex; gap: 10px; align-items: center; }
.admin-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.admin-filter input, .admin-filter select { min-height: 40px; padding: 0 12px; border: 1px solid #d8e4ff; border-radius: 10px; font: inherit; }
.admin-filter input { flex: 1 1 240px; }
.admin-form { max-width: none; gap: 0; }
.admin-form-section { display: grid; gap: 16px; }
.admin-checks { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.admin-checks legend { color: #52688e; font-size: 13px; font-weight: 650; margin-bottom: 6px; }
.admin-checks legend small { font-weight: 500; }
.admin-actions-section h2 { margin: 0 0 10px; font-size: 18px; }
.admin-actions-section h2 + * { margin-bottom: 18px; }
.admin-account-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.admin-password { font-size: 24px; letter-spacing: .08em; padding: 4px 10px; background: #f1f6ff; border-radius: 8px; }
.form-field-error { color: var(--danger); font-weight: 650; }
@media print { .topbar, .site-footer, .editor-actions { display: none; } }
.admin-section-title, .admin-form-section h2 { margin: 0 0 6px; font-size: 18px; }
.admin-page-error { margin-top: 18px; }
.admin-course-row { display: grid; grid-template-columns: 1fr 80px; gap: 10px; align-items: center; }
.admin-course-row small { color: #6b7c93; margin-left: 6px; }
.editor-form .admin-position { padding: 8px 10px; }
.admin-inline-form select { min-height: 34px; padding: 0 8px; border: 1px solid #d8e4ff; border-radius: 8px; font: inherit; }
.admin-add { margin-top: 14px; }
.admin-add summary { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; list-style: none; cursor: pointer; font-weight: 700; }
.admin-add summary::-webkit-details-marker { display: none; }
.admin-add[open] summary { margin-bottom: 12px; }
.admin-pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; max-height: 420px; overflow: auto; }
.admin-pick-list small { color: #6b7c93; margin-left: 4px; }
/* Many tabs (administrators): narrower tabs so the menu stays on one line. */
.mode-switch a { white-space: nowrap; }
.mode-switch:has(a:nth-child(6)) a { min-width: 0; padding: 9px 13px; }
.topbar:has(.mode-switch a:nth-child(6)) { grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr); gap: 16px; padding: 15px 28px; }
.portal-hero .button-secondary, .portal-hero .button { white-space: nowrap; }
.admin-class-actions { margin-top: 14px; }
.admin-import-error td { background: #fff1f1; }
.admin-import-error td:last-child { color: var(--danger); font-weight: 700; }
.admin-import-already td { color: #6b7c93; }
.admin-import-confirm { margin-top: 14px; }
.admin-example { margin: 0; padding: 12px 14px; background: #f8fbff; border: 1px solid var(--blue-border); border-radius: 10px; font-size: 13px; }
.admin-password-small { font-size: 16px; }
.admin-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.admin-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 18px; align-items: start; }
.admin-people-card { display: grid; gap: 12px; margin-top: 18px; }
.admin-people-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.admin-people-head h2 { margin: 0; font-size: 20px; }
.admin-people-head h2 small { color: #6b7c93; font-size: 14px; margin-left: 4px; }
.admin-people-buttons { display: flex; gap: 8px; }
.admin-table-search { min-height: 40px; padding: 0 12px; border: 1px solid #d8e4ff; border-radius: 10px; font: inherit; max-width: 280px; background: #f8fbff; }
.admin-people-table td, .admin-people-table th { white-space: normal; }
.admin-check-cell { width: 36px; }
.admin-check-cell input { width: 17px; height: 17px; accent-color: var(--blue); }
.admin-selection-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 8px; border-radius: 10px; background: #f1f6ff; }
.admin-selection-bar[hidden] { display: none; }
.admin-selection-bar span { font-weight: 700; color: var(--blue); margin-right: 6px; }
.admin-selection-bar .button-secondary { min-height: 32px; padding: 0 12px; }
.admin-status-withdrawn td { color: #9aa9c0; }
.admin-pager { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.admin-pager button { min-width: 36px; min-height: 32px; border: 0; border-radius: 8px; background: transparent; color: #52688e; font: inherit; font-weight: 700; cursor: pointer; }
.admin-pager button.active { background: var(--blue); color: #ffffff; }
.admin-pager button:disabled { opacity: .35; cursor: default; }
.admin-pager span { color: #6b7c93; font-size: 13px; margin: 0 8px; }
.admin-dialog { width: min(560px, 92vw); padding: 0; border: 1px solid var(--blue-border); border-radius: 18px; box-shadow: 0 20px 60px rgba(15, 23, 42, .25); }
.admin-dialog::backdrop { background: rgba(15, 23, 42, .35); }
.admin-dialog form { display: grid; gap: 12px; padding: 20px 22px; }
.admin-dialog-head { display: flex; align-items: center; justify-content: space-between; }
.admin-dialog-head h2 { margin: 0; font-size: 20px; }
.admin-dialog .admin-table-search { max-width: none; }
.admin-dialog-list { display: grid; gap: 6px; max-height: 50vh; overflow: auto; }
.admin-dialog-list small { color: #6b7c93; margin-left: 4px; }
.admin-dialog-list [hidden] { display: none; }
.admin-wrap { white-space: normal !important; }
@media (max-width: 960px) { .admin-people { grid-template-columns: 1fr; } }
.admin-delete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e3eaf6; }

/* Links in tables look like AvioFlow text, not browser links (2026-10-24). */
.exam-table a:not(.button):not(.button-secondary) { color: var(--blue); font-weight: 650; text-decoration: none; }
.exam-table a:not(.button):not(.button-secondary):hover { text-decoration: underline; }
.exam-table tbody tr:hover td { background: #f8fbff; }
.button-small { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; font-size: 13px; text-decoration: none; white-space: nowrap; }
.table-action { text-align: right; width: 1%; }
.chip-link { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--blue-border); border-radius: 999px; background: #f1f6ff; color: var(--blue); font-weight: 700; font-size: 13px; text-decoration: none; }
.chip-link:hover { border-color: var(--blue); background: #e8f0ff; }
.admin-programme-line { display: flex; align-items: center; gap: 10px; }
.table-buttons { display: inline-flex; gap: 6px; justify-content: flex-end; }
/* Roles and publish rights: plain checkboxes, no boxes around them. */
.admin-checks { gap: 4px; }
.admin-checks .exam-choice { padding: 4px 0; border: 0; border-radius: 0; background: none; }
.admin-checks .exam-choice:has(input:checked) { background: none; }
.exam-table td.table-action { text-align: right; }
.admin-programmes-card { display: grid; gap: 10px; }
.admin-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-group { display: inline-flex; align-items: center; gap: 2px; padding-right: 4px; border: 1px solid var(--blue-border); border-radius: 999px; background: #f1f6ff; }
.chip-group .chip-link { border: 0; background: none; }
.chip-remove { width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: #52688e; font-size: 16px; line-height: 1; cursor: pointer; }
.chip-remove:hover { background: #ffe1e1; color: var(--danger); }
.admin-link-programme { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-link-programme select { min-height: 38px; padding: 0 10px; border: 1px solid #d8e4ff; border-radius: 10px; font: inherit; max-width: 100%; }
/* All admin forms: plain checkboxes without boxes around them (2026-10-24). */
.admin-form .exam-choice, .admin-dialog-list .exam-choice { padding: 4px 0; border: 0; border-radius: 0; background: none; }
.admin-form .exam-choice:has(input:checked), .admin-dialog-list .exam-choice:has(input:checked) { background: none; }
.admin-course-row { grid-template-columns: 1fr 70px; padding: 2px 0; border-bottom: 1px solid #eef2fa; }
.admin-course-row:last-of-type { border-bottom: 0; }
.admin-course-list { display: grid; }
.admin-course-head { color: #6b7c93; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding-bottom: 6px; }
.admin-course-head span:last-child, .admin-position-none { text-align: center; }
.admin-position-none { color: #9aa9c0; }
.editor-form .admin-position { text-align: center; }
.button-disabled { color: #9aa9c0 !important; border-color: #e3eaf6 !important; background: #f8fafc !important; cursor: help; }
.admin-delete-top { margin-top: 0; padding-top: 0; border-top: 0; }
/* Delete buttons stay red on hover, with a light red background. */
.button-secondary.button-danger:hover { color: var(--danger); background: #fff1f1; border-color: #f3c4c4; }

/* AvioFlow confirmation window (confirm.js). */
.avio-confirm { width: min(440px, 92vw); padding: 24px 26px 22px; border: 1px solid var(--blue-border); border-radius: 18px; background: #ffffff; color: var(--ink); box-shadow: 0 24px 70px rgba(15, 23, 42, .28); }
.avio-confirm::backdrop { background: rgba(15, 23, 42, .4); }
.avio-confirm h2 { margin: 0 0 8px; font-size: 20px; }
.avio-confirm p { margin: 0 0 20px; color: #52688e; line-height: 1.55; }
.avio-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.avio-confirm-actions button { min-height: 40px; padding: 0 18px; font-weight: 700; }
.avio-confirm-danger { background: var(--danger) !important; border-color: var(--danger) !important; color: #ffffff !important; }
.avio-confirm-danger:hover { filter: brightness(.92); }

/* ---------- Radio Communications (ADR 0022) ---------- */
.radio-new { display: flex; gap: 8px; align-items: center; }
.radio-new input { min-width: 260px; padding: 10px 12px; border: 1.5px solid var(--blue-border); border-radius: 10px; font: inherit; }
.radio-actions { display: flex; gap: 8px; align-items: center; }
.radio-actions form { display: flex; gap: 8px; }
.radio-cards { display: grid; gap: 14px; }
.radio-card-edit { display: grid; gap: 10px; margin: 0; padding: 16px; border: 1.5px solid var(--blue-border); border-radius: 14px; background: var(--white); }
.radio-card-head { display: flex; gap: 8px; align-items: center; }
.radio-card-head strong { flex: 1; }
.radio-call-row { display: grid; grid-template-columns: minmax(120px, 1fr) 3fr; gap: 10px; }
.button-secondary.danger { color: var(--danger); }
.radio-archive { margin-top: 18px; }
.radio-practice { max-width: 760px; }
/* Radio exercise states on the dashboard (as on the Traffic Board). */
.radio-state { font-weight: 700; }
.radio-state-published { color: #1f7a3a; }
.radio-state-submitted { color: #8a5a00; }
.radio-state-rejected { color: #b42318; }

/* Speech trial: push to talk (radio/speech_trial.html, ADR 0029). */
.speech-ptt { display: grid; justify-items: center; gap: 4px; width: 100%; margin-top: 16px; padding: 22px; border: 2px solid var(--blue); border-radius: 18px; background: var(--white); color: var(--blue); font: 800 20px var(--sans, inherit); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.speech-ptt small { color: var(--muted); font-size: 13px; font-weight: 600; }
.speech-ptt-icon { font-size: 34px; }
.speech-ptt.is-talking { background: #b42318; border-color: #b42318; color: #ffffff; }
.speech-ptt.is-talking small { color: #ffe4e1; }
.speech-result { display: grid; gap: 8px; }
.speech-heard { margin: 0; font-size: 20px; line-height: 1.6; }
.speech-word { padding: 1px 3px; border-radius: 6px; }
.speech-word.is-doubtful { background: #fff4d6; color: #8a5a00; text-decoration: underline dotted; }
.speech-listen { margin-bottom: 16px; }
.speech-listen audio { width: 100%; max-width: 420px; }
.speech-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.speech-results h3 { margin: 0 0 8px; font-size: 15px; }
.speech-elements { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.speech-elements .is-confirmed { color: #1f6b3a; }
.speech-elements .is-contradicted { color: #a3261b; }
.speech-elements .is-doubtful { color: #8a5a00; }

/* Radio practice results for instructors (lesson_radio_results.html). */
.radio-result-call { display: grid; gap: 8px; padding: 16px 0; border-top: 1px solid var(--blue-border); }
.radio-result-call h3 { margin: 0; font-size: 16px; }
.radio-result-totals { margin: 0; }
.radio-result-issues { margin: 0; padding-left: 18px; color: #b42318; }
.radio-result-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.radio-result-table th, .radio-result-table td { padding: 8px 10px; border-bottom: 1px solid var(--blue-border); text-align: left; vertical-align: top; }
.radio-result-table thead th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 760px) { .radio-result-table { display: block; overflow-x: auto; } }

/* Small chart above radio cards of a scenario exercise (practice.js). */
.radio-map { display: block; width: auto; max-width: 100%; height: auto; max-height: 280px; margin: 0 auto; border: 1px solid var(--blue-border); border-radius: 12px; }
.radio-map-route { fill: none; stroke: #ffffff; stroke-width: 3; stroke-dasharray: 10 7; opacity: .55; }
.radio-map-route.is-calling { stroke: #1e5bff; stroke-width: 8; opacity: 1; }
.radio-map-marker { fill: #ffffff; stroke: #1e5bff; stroke-width: 6; }
.radio-map-icon { font-size: 28px; text-anchor: middle; dominant-baseline: middle; }
.radio-map-label { fill: #0b1424; font: 800 30px var(--mono, monospace); text-anchor: middle; paint-order: stroke; stroke: #ffffff; stroke-width: 7px; }

/* Typed radio replies checked on the server (practice.js, ADR 0027). */
.radio-typed { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.radio-typed label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 700; }
.radio-typed input { min-height: 46px; padding: 10px 12px; border: 1.5px solid var(--blue-border); border-radius: 12px; font: 500 16px var(--sans, inherit); }
.radio-verdict { margin: 0; font-size: 18px; font-weight: 800; }
.radio-verdict.is-correct { color: #1f7a3a; }
.radio-verdict.is-wrong { color: #b42318; }
.radio-feedback { margin: 0; color: var(--ink); }
.radio-call-elements textarea { min-height: 84px; font: inherit; }

/* Radio practice step editor (radio_step.html, radio-step-editor.js). */
.radio-source { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.radio-source legend { margin-bottom: 6px; color: var(--muted); font-size: 13px; font-weight: 700; }
.radio-source-choice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border: 1.5px solid var(--blue-border); border-radius: 14px; background: var(--white); cursor: pointer; }
.radio-source-choice:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 3px #e9efff; }
.radio-source-choice span { display: grid; gap: 2px; }
.editor-form .radio-source-choice input { width: auto; min-height: 0; margin: 3px 0 0; }
.radio-source-choice small { color: var(--muted); }
.radio-call-picture { display: grid; gap: 8px; }
.radio-call-picture img { max-width: 260px; max-height: 160px; object-fit: contain; border: 1px solid var(--blue-border); border-radius: 10px; }
.radio-call-remove { display: flex; gap: 6px; align-items: center; font-weight: 500; }
.radio-card .radio-image { display: block; width: 100%; max-height: 320px; object-fit: contain; border: 1px solid var(--blue-border); border-radius: 12px; background: var(--white); }
.radio-progress { display: flex; gap: 12px; align-items: center; color: var(--muted); font-weight: 600; }
.radio-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--blue-soft); overflow: hidden; }
.radio-bar i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .3s; }
.radio-card { display: grid; gap: 16px; margin: 18px 0; padding: 22px; border: 1.5px solid var(--blue-border); border-radius: 18px; background: var(--white); }
.radio-situation { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text); }
.radio-situation b, .radio-given b { display: block; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue); }
.radio-given { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.radio-given b { flex-basis: 100%; }
.radio-given span { padding: 4px 10px; border-radius: 8px; background: var(--blue-soft); font: 700 14px ui-monospace, monospace; }
.radio-call { padding: 12px 16px; border: 3px solid var(--blue-border); border-radius: 14px; font: 600 17px ui-monospace, monospace; line-height: 1.45; color: var(--ink); }
.radio-call span { display: block; margin-bottom: 4px; font: 800 11px var(--sans, sans-serif); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.radio-reply { border-color: #1d2a36; background: #1d2a36; color: var(--white); }
.radio-reply span { color: #f2c230; }
.radio-turn { display: grid; gap: 4px; padding: 18px; border: 2px dashed #f2c230; border-radius: 14px; background: #fff8e1; color: #5c4400; font: 700 17px inherit; cursor: pointer; }
.radio-turn small { font-weight: 600; opacity: .8; }
.radio-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.radio-grade button { padding: 14px; border-radius: 14px; background: var(--white); font: 700 17px inherit; cursor: pointer; }
.radio-wrong { border: 2px solid var(--danger); color: var(--danger); }
.radio-right { border: 2px solid var(--success); color: var(--success); }
@media (max-width: 640px) {
    .radio-new, .radio-actions { flex-direction: column; align-items: stretch; }
    .radio-new input { min-width: 0; }
    .radio-call-row { grid-template-columns: 1fr; }
}

/* Menu groups with a submenu (learning/navigation.py): open on hover or focus. */
.nav-group { position: relative; display: flex; }
.nav-group-toggle { min-width: 108px; padding: 9px 15px; color: #15203b; background: transparent; border: 0; border-radius: 24px; font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; }
.nav-group-toggle span { font-size: 11px; opacity: .7; }
.nav-group:hover .nav-group-toggle, .nav-group:focus-within .nav-group-toggle, .nav-group-toggle.active { color: #3261ff; background: #ffffff; box-shadow: 0 2px 7px rgba(36, 75, 50, .06); }
.nav-menu { position: absolute; top: 100%; left: 50%; z-index: 50; display: none; min-width: 190px; padding: 6px; transform: translateX(-50%); background: #ffffff; border: 1px solid #d8e4ff; border-radius: 14px; box-shadow: 0 10px 30px rgba(11, 20, 36, .14); }
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu { display: grid; gap: 2px; }
.nav-menu a { display: block; min-width: 0; padding: 9px 14px; border-radius: 10px; text-align: left; white-space: nowrap; box-shadow: none; }
.nav-menu a:hover, .nav-menu a.active { background: #eef4ff; box-shadow: none; }
/* A small gap under the button must not close the menu while the pointer moves down. */
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }