/* FCLE study system styles - same visual language as the citizenship quizzes (Comic Sans
   override, light card floating over the site's own textured background) but with its own
   layout rules for the flashcard UI and topic-aware quiz/simulator screens, which have a
   different shape than the simple single-pool quizzes. */

.fcle-wrapper, .fcle-wrapper * {
    font-family: "Comic Sans MS", "Comic Sans", Arial, sans-serif;
}

.fcle-wrapper {
    max-width: 720px;
    margin: 30px auto;
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.93);
    border: 2px solid black;
    border-radius: 10px;
    color: rgb(20, 20, 20);
    text-align: left;
}

/* Flashcards page only - wide enough for the left/right context panels flanking the card. */
.fcle-wrapper.fcle-wrapper-wide {
    max-width: 1040px;
}

.fcle-wrapper h1, .fcle-wrapper h2 {
    text-align: center;
    color: rgb(20, 20, 20);
}

.fcle-intro p {
    font-size: 17px;
    text-align: left;
}

.fcle-nav-links {
    text-align: center;
    margin-bottom: 10px;
    font-size: 16px;
}

/* Separates the FAQ section (not official FCLE study material) from the study tools above it. */
.fcle-wrapper hr {
    border: none;
    border-top: 2px solid rgb(180, 180, 180);
    margin: 26px 0;
}

/* jadecss.css sets every <a> to near-white text (meant for the site's dark textured header/
   background), which is invisible against the light .fcle-wrapper card these links sit on. */
.fcle-nav-links a {
    color: rgb(50, 46, 60);
}

.fcle-nav-links a:hover {
    color: rgb(90, 84, 110);
}

/* jadecss.css also puts an external wall-texture background-image on every <li> site-wide
   (meant for the main site's nav menu) - override it for every <li> inside the FCLE app so
   quiz options and FAQ bullets never show that texture bleeding through. */
.fcle-wrapper li {
    background-image: none;
}

.fcle-controls-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 16px 0;
    font-size: 17px;
}

/* Groups of related checkboxes (e.g. the audio-pronunciation options) read better stacked
   than side-by-side, unlike the single-row topic/filter selects .fcle-controls-row is
   otherwise used for. */
.fcle-checkbox-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.fcle-controls-row select, .fcle-controls-row input[type="number"] {
    font-size: 16px;
    padding: 4px;
}

.fcle-controls-row select {
    max-width: 320px;
}

.fcle-button {
    display: inline-block;
    margin: 10px 6px;
    padding: 10px 22px;
    font-size: 18px;
    font-family: inherit;
    cursor: pointer;
    background-color: rgb(50, 46, 60);
    color: white;
    border: 2px solid black;
    border-radius: 6px;
}

.fcle-button:hover {
    background-color: rgb(80, 74, 96);
}

.fcle-button:disabled {
    background-color: rgb(160, 160, 160);
    cursor: not-allowed;
}

.fcle-button-row {
    text-align: center;
}

.fcle-button-desc {
    max-width: 560px;
    margin: -6px auto 20px auto;
    font-size: 14px;
    line-height: 1.45;
    color: rgb(90, 90, 90);
}

.fcle-button.secondary {
    background-color: rgb(120, 116, 130);
}

.fcle-progress {
    text-align: center;
    font-size: 16px;
    margin-bottom: 10px;
    color: rgb(60, 60, 60);
}

/* Flashcard 3-column layout: context panel / card / context panel. The two side panels are
   ALWAYS present in the DOM and always take up their column width - when a card has no content
   for a given side, the panel gets `visibility: hidden` (not display:none, and not removed),
   so its layout space stays reserved and the card column never re-centers itself. */
.fcle-panel-layout {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
}

.fcle-context-panel {
    flex: 0 0 230px;
    width: 230px;
    box-sizing: border-box;
    min-height: 220px;
    background-color: rgb(244, 244, 250);
    border: 2px solid rgb(110, 110, 135);
    border-radius: 8px;
    padding: 12px;
    font-size: 13px;
    line-height: 1.4;
    visibility: hidden;
}

.fcle-context-panel.fcle-context-visible {
    visibility: visible;
}

.fcle-context-panel h3 {
    margin: 0 0 8px 0;
    font-size: 15px;
    text-align: center;
    color: rgb(50, 46, 60);
}

.fcle-context-entry {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgb(210, 210, 220);
}

.fcle-context-entry:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.fcle-context-entry .fcle-context-label {
    font-weight: bold;
    display: block;
    margin-bottom: 2px;
}

.fcle-center-column {
    flex: 0 1 420px;
    width: 420px;
    box-sizing: border-box;
}

/* Flashcard */
.fcle-flashcard {
    min-height: 160px;
    border: 3px solid rgb(50, 46, 60);
    border-radius: 10px;
    background-color: rgb(250, 250, 245);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    margin: 16px 0;
    cursor: pointer;
    font-size: 20px;
}

.fcle-flashcard.flipped {
    background-color: rgb(238, 244, 250);
    font-size: 17px;
    font-weight: normal;
}

.fcle-flashcard .fcle-flashcard-label {
    font-size: 13px;
    font-weight: normal;
    color: rgb(110, 110, 110);
    position: absolute;
    margin-top: -80px;
}

.fcle-flashcard-term {
    font-weight: bold;
}

.fcle-flashcard-hint {
    text-align: center;
    font-size: 14px;
    color: rgb(110, 110, 110);
    margin-top: -10px;
    margin-bottom: 10px;
}

.fcle-know-row {
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* Video embed area (competency flashcards only) - the direct link is always shown alongside
   any embed, since some YouTube uploaders disable embedding and there's no reliable way to
   detect that ahead of time without a per-video API check; the link is the guaranteed fallback. */
.fcle-video-area {
    margin: 10px 0 16px 0;
    text-align: center;
}

.fcle-video-area iframe {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 2px solid rgb(50, 46, 60);
    border-radius: 6px;
}

.fcle-video-link {
    display: block;
    margin-top: 6px;
    font-size: 14px;
}

.fcle-know-button {
    background-color: rgb(70, 140, 70);
}
.fcle-know-button:hover {
    background-color: rgb(90, 165, 90);
}

.fcle-learning-button {
    background-color: rgb(160, 90, 40);
}
.fcle-learning-button:hover {
    background-color: rgb(190, 115, 60);
}

.fcle-status-badge {
    display: inline-block;
    font-size: 13px;
    padding: 2px 10px;
    border-radius: 10px;
    margin-left: 8px;
}
.fcle-status-badge.known {
    background-color: rgb(198, 239, 198);
}
.fcle-status-badge.learning {
    background-color: rgb(245, 214, 190);
}

/* Quiz question area (topic quiz + simulator) */
.fcle-question {
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0 20px 0;
}

.fcle-options {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.fcle-option {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 17px;
    font-family: inherit;
    padding: 12px 16px;
    margin: 8px 0;
    background-color: rgb(240, 240, 240);
    border: 2px solid rgb(120, 120, 120);
    border-radius: 6px;
    cursor: pointer;
}

.fcle-option:hover:not(:disabled) {
    background-color: rgb(222, 222, 240);
}

.fcle-option:disabled {
    cursor: default;
}

.fcle-option.correct {
    background-color: rgb(198, 239, 198);
    border-color: rgb(40, 130, 40);
    font-weight: bold;
}

.fcle-option.incorrect {
    background-color: rgb(245, 200, 200);
    border-color: rgb(160, 40, 40);
}

.fcle-feedback {
    padding: 14px 18px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 16px;
}

.fcle-feedback.right {
    background-color: rgb(222, 245, 222);
    border: 1px solid rgb(40, 130, 40);
}

.fcle-feedback.wrong {
    background-color: rgb(250, 228, 228);
    border: 1px solid rgb(160, 40, 40);
}

.fcle-feedback .fcle-feedback-heading {
    font-weight: bold;
    display: block;
    margin-bottom: 6px;
}

.fcle-score-summary {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.fcle-topic-breakdown {
    margin: 16px 0;
}

.fcle-topic-breakdown table, .fcle-history table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.fcle-topic-breakdown th, .fcle-topic-breakdown td,
.fcle-history th, .fcle-history td {
    text-align: left;
    padding: 5px 8px;
    border-bottom: 1px solid rgb(210, 210, 210);
}

.fcle-history {
    margin-top: 26px;
    border-top: 2px solid rgb(180, 180, 180);
    padding-top: 14px;
}

.fcle-history-empty {
    text-align: center;
    color: rgb(100, 100, 100);
    font-style: italic;
}

.fcle-hidden {
    display: none;
}

/* FAQ page */
.fcle-faq-list {
    margin-top: 10px;
}

.fcle-faq-item {
    border: 2px solid rgb(110, 110, 135);
    border-radius: 8px;
    margin-bottom: 14px;
    background-color: rgb(250, 250, 245);
    overflow: hidden;
}

.fcle-faq-item summary {
    cursor: pointer;
    padding: 14px 18px;
    font-weight: bold;
    font-size: 18px;
    background-color: rgb(244, 244, 250);
    list-style: none;
}

.fcle-faq-item summary::-webkit-details-marker {
    display: none;
}

.fcle-faq-item summary::before {
    content: "+ ";
    color: rgb(50, 46, 60);
}

.fcle-faq-item[open] summary::before {
    content: "\2212 ";
}

.fcle-faq-item[open] summary {
    border-bottom: 2px solid rgb(110, 110, 135);
}

.fcle-faq-body {
    padding: 6px 20px 18px 20px;
    font-size: 16px;
    line-height: 1.5;
}

.fcle-faq-body h4 {
    margin: 16px 0 4px 0;
    color: rgb(50, 46, 60);
}

.fcle-faq-body ul {
    list-style: none;
    margin: 6px 0;
    padding-left: 0;
}

/* Native list-style markers were rendering as a see-through compositor layer on some
   GPU/browser setups (letting whatever else was on screen show through) - replaced with a
   custom bullet drawn on an explicitly opaque background instead of relying on the browser's
   own marker box. */
.fcle-faq-body li {
    position: relative;
    margin-bottom: 6px;
    padding-left: 22px;
    background-color: rgb(250, 250, 245);
}

.fcle-faq-body li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgb(50, 46, 60);
}