@font-face{font-family:'DINPro';src:url("/cl350/_shared/fonts/DINPro-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'DINPro';src:url("/cl350/_shared/fonts/DINPro-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'DINPro';src:url("/cl350/_shared/fonts/DINPro-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'DINPro';src:url("/cl350/_shared/fonts/DINPro-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'DINPro';src:url("/cl350/_shared/fonts/DINPro-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap;}
/*
//*************************************************
// Flight Crew Systems, Inc. dba LOFT
// CL-350 Interactive Flashcard Application
// Richard J. Sears
// richard@loft.aero
// Version 1.0.0
// November 7th, 2025
//*************************************************
*/

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    font-family: 'DINPro',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background-color: #f5f5f5;
    min-height: 100vh;
    background-image: url('./map_background.gif');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Banner */
.banner {
    height: 60px;
    background: #b7b8b9;
    display: flex;
    align-items: center;
    padding: 0 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.banner-logo {
    height: 40px;
    margin-right: 15px;
}

.banner h1 {
    color: #fe5000;
    font-size: 24px;
    font-weight: 600;
}

/* Container */
.container {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Welcome Page */
.welcome-page {
    background: white;
    border-radius: 12px;
    padding: 60px 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    text-align: center;
}

.welcome-page h2 {
    font-size: 36px;
    color: #333;
    margin-bottom: 20px;
}

.welcome-page p {
    font-size: 18px;
    color: #666;
    margin-bottom: 40px;
}

.deck-selector {
    margin: 40px 0;
}

.deck-selector label {
    display: block;
    font-size: 16px;
    color: #555;
    margin-bottom: 15px;
}

.deck-selector select {
    width: 100%;
    max-width: 400px;
    padding: 15px;
    font-size: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: border-color 0.3s;
}

.deck-selector select:hover {
    border-color: #75787b;
}

.deck-selector select:focus {
    outline: none;
    border-color: #75787b;
}

.all-systems-options {
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.all-systems-options label {
    display: block;
    font-size: 16px;
    color: #555;
    margin-bottom: 10px;
}

.all-systems-options input[type="number"] {
    width: 100px;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    text-align: center;
}

.start-btn {
    background: #75787b;
    color: white;
    border: none;
    padding: 15px 50px;
    font-size: 18px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 30px;
}

.start-btn:hover:not(:disabled) {
    background: #fe5000;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(254, 80, 0, 0.3);
}

.start-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

/* Mode Selection Page */
.mode-selection-page {
    background: white;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    text-align: center;
}

.mode-container {
    text-align: center;
}

.mode-selection-page h2 {
    font-size: 32px;
    color: #333;
    margin-bottom: 15px;
}

.mode-selection-page p {
    font-size: 18px;
    color: #666;
    margin-bottom: 30px;
}

.mode-selector h3 {
    font-size: 24px;
    color: #333;
    margin-bottom: 30px;
}

.mode-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 500px;
    margin: 0 auto 30px;
}

.mode-option {
    background: #f8f9fa;
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 25px;
    cursor: pointer;
    transition: all 0.3s;
}

.mode-option:hover {
    background: linear-gradient(135deg, rgba(117, 120, 123, 0.1) 0%, rgba(254, 80, 0, 0.1) 100%);
    border-color: #75787b;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(117, 120, 123, 0.2);
}

.mode-option h3,
.mode-option h4 {
    font-size: 20px;
    color: #75787b;
    margin-bottom: 10px;
}

.mode-option p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* Flashcard Page */
.flashcard-page {
    background: white;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.flashcard-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
}

.flashcard-header h2 {
    font-size: 28px;
    color: #333;
    margin-bottom: 10px;
}

.progress-info {
    font-size: 18px;
    color: #75787b;
    font-weight: 600;
}

/* Flashcard */
.flashcard {
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

.card-content {
    flex: 1;
    padding: 30px;
    background: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 30px;
}

.question-section,
.answer-section {
    margin-bottom: 30px;
}

.question-section {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.answer-section {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding-top: 30px;
    border-top: 2px solid #e0e0e0;
}

.card-image {
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.question-text,
.answer-text {
    flex: 1;
    font-size: 18px;
    line-height: 1.6;
    color: #333;
}

.question-text {
    font-weight: 600;
}

.answer-text {
    color: #555;
}

/* Card Controls */
.card-controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.primary-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* Show Answer button and other control buttons */
.control-btn {
    padding: 12px 30px;
    font-size: 16px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    background: #75787b;
    color: white;
}

.control-btn:hover {
    background: #fe5000;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(254, 80, 0, 0.3);
}

/* Secondary variant (Start Over button) */
.control-btn.secondary {
    background: transparent;
    color: #75787b;
    border: 2px solid #75787b;
}

.control-btn.secondary:hover {
    background: #28a745;
    color: white;
    border-color: #28a745;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

/* Correct button in quiz mode */
.control-btn.correct {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.control-btn.correct:hover {
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

/* Incorrect button in quiz mode */
.control-btn.incorrect {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.control-btn.incorrect:hover {
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

/* Quit button (danger variant) */
.control-btn.danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.control-btn.danger:hover {
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.quiz-controls {
    display: flex;
    gap: 15px;
}

.navigation-controls {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

/* Bottom Controls - Fixed spacing issue */
.bottom-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding-top: 20px;
    margin-top: 30px;  /* Creates gap between navigation buttons and dividing line */
    border-top: 2px solid #e0e0e0;
}

/* Next and Back navigation buttons */
.nav-btn {
    background: #75787b;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
}

.nav-btn:hover:not(:disabled) {
    background: #fe5000;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(254, 80, 0, 0.3);
}

.nav-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.nav-btn.secondary {
    background: transparent;
    color: #75787b;
    border: 2px solid #75787b;
}

.nav-btn.secondary:hover:not(:disabled) {
    background: #75787b;
    color: white;
    transform: translateY(-2px);
}

/* Score Display */
.score-display {
    text-align: center;
    margin-top: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.correct-count {
    color: #28a745;
    font-weight: 600;
    margin-right: 20px;
}

.incorrect-count {
    color: #dc3545;
    font-weight: 600;
}

/* Results Page */
.results-page {
    background: white;
    border-radius: 12px;
    padding: 60px 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    text-align: center;
}

.results-page h2 {
    font-size: 36px;
    color: #333;
    margin-bottom: 40px;
}

.score-summary {
    display: flex;
    justify-content: space-around;
    margin: 40px 0;
    flex-wrap: wrap;
    gap: 30px;
}

.score-item {
    flex: 1;
    min-width: 150px;
}

.score-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.score-value {
    font-size: 48px;
    font-weight: bold;
    color: #75787b;
}

.score-details {
    margin: 20px 0;
}

.score-details p {
    font-size: 18px;
    color: #666;
    margin: 10px 0;
}

/* System Breakdown */
.system-breakdown {
    margin: 40px 0;
    padding: 30px;
    background: #f8f9fa;
    border-radius: 10px;
}

.system-breakdown h3 {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
}

.system-score {
    padding: 10px;
    margin: 10px 0;
    background: white;
    border-radius: 6px;
    font-size: 16px;
}

/* Results Actions */
.results-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.results-btn {
    padding: 12px 30px;
    font-size: 16px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

.results-btn.primary {
    background: #75787b;
    color: white;
}

.results-btn.primary:hover {
    background: #fe5000;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(254, 80, 0, 0.3);
}

.results-btn.secondary {
    background: transparent;
    color: #75787b;
    border: 2px solid #75787b;
}

.results-btn.secondary:hover {
    background: #75787b;
    color: white;
    transform: translateY(-2px);
}

/* Hidden Class */
.hidden {
    display: none !important;
}

/* EICAS Message Styles */
.eicas-message {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
    line-height: 1.4;
}

.eicas-warning {
    color: #fe0101;
}

.eicas-caution {
    color: #ffcd00;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.eicas-advisory {
    color: #03aefe;
}

.eicas-status {
    color: #ffffff;
    background: #000000;
    padding: 4px 10px;
    border-radius: 4px;
}

/* In flashcard questions and answers, make EICAS messages stand out */
.question-text .eicas-message,
.answer-text .eicas-message {
    font-size: 22px;
    margin: 0 4px;
}

/* Ensure EICAS messages look good on dark backgrounds */
.card-content .eicas-message {
    line-height: 1.8;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        margin: 20px auto;
    }

    .welcome-page,
    .mode-selection-page,
    .flashcard-page,
    .results-page {
        padding: 30px 20px;
    }

    .welcome-page h2,
    .results-page h2 {
        font-size: 28px;
    }

    .mode-selection-page h2 {
        font-size: 24px;
    }

    .flashcard-header h2 {
        font-size: 22px;
    }

    .question-text,
    .answer-text {
        font-size: 16px;
    }

    .question-section,
    .answer-section {
        flex-direction: column;
    }

    .card-image {
        max-width: 100%;
        margin-bottom: 15px;
    }

    .navigation-controls {
        flex-direction: column;
    }

    .nav-btn {
        width: 100%;
    }

    .score-summary {
        flex-direction: column;
    }

    .score-value {
        font-size: 36px;
    }

    .results-actions {
        flex-direction: column;
    }

    .results-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .banner h1 {
        font-size: 20px;
    }

    .banner-logo {
        height: 30px;
    }

    .welcome-page h2 {
        font-size: 24px;
    }

    .mode-option h4 {
        font-size: 18px;
    }

    .question-text,
    .answer-text {
        font-size: 14px;
    }

    .control-btn,
    .nav-btn {
        padding: 10px 20px;
        font-size: 14px;
    }

    .results-page h2 {
        font-size: 24px;
    }
}

/* Buttons/inputs don't inherit font-family by default - keep them on DINPro. */
button, input, select, textarea { font-family: inherit; }


/* ============================================================
   House styling: buttons match the rest of the CL-350 site.
   EXCEPTION: .correct / .incorrect keep green/red - they are the
   self-grading controls and must stay distinguishable at a glance.
   Appended last so it wins without touching the rules above.
   ============================================================ */
.start-btn,
.control-btn,
.control-btn.secondary,
.control-btn.danger,
.nav-btn,
.nav-btn.secondary,
.results-btn,
.results-btn.primary,
.results-btn.secondary {
    background: #fff;
    border: 1.5px solid #c4cad1;
    color: #2a2e33;
    border-radius: 9px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 11px 30px;
    transition: all .17s ease;
}
.start-btn:hover:not(:disabled),
.control-btn.secondary:hover,
.control-btn.danger:hover,
.nav-btn:hover:not(:disabled),
.nav-btn.secondary:hover:not(:disabled),
.results-btn:hover,
.results-btn.primary:hover,
.results-btn.secondary:hover,
#showAnswerBtn:hover {
    border-color: #FE5000;
    background: #FE5000;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(254, 80, 0, 0.30);
}
.start-btn:disabled,
.nav-btn:disabled {
    background: #f2f4f6;
    border-color: #d3d8dd;
    color: #a7adb4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* grading controls stay semantic */
.control-btn.correct {
    background: #2f9e44; border-color: #2f9e44; color: #fff;
}
.control-btn.correct:hover {
    background: #278237; border-color: #278237; color: #fff;
    transform: translateY(-2px); box-shadow: 0 7px 18px rgba(47, 158, 68, 0.30);
}
.control-btn.incorrect {
    background: #dc3545; border-color: #dc3545; color: #fff;
}
.control-btn.incorrect:hover {
    background: #bd2130; border-color: #bd2130; color: #fff;
    transform: translateY(-2px); box-shadow: 0 7px 18px rgba(220, 53, 69, 0.30);
}

/* ---- Mode selection: house heading + house cards (already stacked & centred) ---- */
.mode-selection-page h2 {
    font-size: 26px; letter-spacing: -0.3px; color: #2a2e33; margin: 0 0 4px;
}
.mode-selection-page p { font-size: 15px; color: #75787B; }
.mode-options { gap: 13px; max-width: 460px; margin: 22px auto 0; }
.mode-option {
    background: #f2f4f6;
    border: 1.5px solid #c4cad1;
    border-radius: 11px;
    padding: 14px 16px;
    min-height: 62px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    text-align: left;
    color: #2a2e33;
    transition: all .17s ease;
}
.mode-option:hover {
    background: #FE5000; border-color: #FE5000; color: #fff;
    transform: translateY(-2px); box-shadow: 0 7px 18px rgba(254, 80, 0, 0.30);
}
.mode-option h3,
.mode-option h4 {
    font-size: 14.5px; font-weight: 500; color: inherit; margin: 0; line-height: 1.25;
}
.mode-option p { font-size: 12px; color: #8a9099; margin: 0; }
.mode-option:hover p { color: rgba(255, 255, 255, 0.92); }

/* Back sits centred, clear of the cards above it */
#backToSelectionBtn { margin-top: 28px; }