/*
 * Exam Simulator
 * Version: 4.1.6
 * Build: 20260928-READALOUD
 * File: app.css
 * V1 visual baseline + V4 responsive additions
 */

*{box-sizing:border-box}

body{margin:0;font-family:Inter,Arial,sans-serif;background:#f5f7fb;color:#172033;line-height:1.55}

a{color:#2563eb}

.top{min-height:64px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:20px}

.top a{color:#fff;text-decoration:none}
.mock-question-top{gap:12px}
.mock-question-top>b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:620px){.mock-question-top{height:auto;flex-wrap:wrap;gap:8px;padding-top:8px;padding-bottom:8px}.mock-question-top>b{order:1;flex-basis:100%}.mock-question-top #timer{margin-left:auto}}

.topbar{min-height:64px;background:#111827;color:#fff;display:flex;align-items:center}

.topbar .wrap{margin:0 auto}

.topbar a{color:#fff;text-decoration:none}

.wrap{max-width:1180px;margin:40px auto;padding:0 20px}

.narrow{max-width:760px}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}

.card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:22px;box-shadow:0 3px 15px rgba(0,0,0,.04);margin-bottom:18px}


.card h2{margin:8px 0 12px}

.muted{color:#68738a}

.button,.btn{display:inline-block;border:0;border-radius:8px;background:#2563eb;color:#fff;padding:10px 16px;text-decoration:none;cursor:pointer;font:inherit;font-weight:700;line-height:1.35}

.button:hover,.btn:hover{background:#1d4ed8}

.secondary{background:#6b7280!important;color:#fff!important}

.secondary:hover{background:#4b5563!important}

.button.large,.btn.large{padding:14px 22px;font-size:16px}

.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px}

.mode-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:22px;box-shadow:0 3px 15px rgba(0,0,0,.04);text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px;transition:border-color .15s,box-shadow .15s,transform .15s}

.mode-card:hover{border-color:#2563eb;box-shadow:0 5px 18px rgba(37,99,235,.12);transform:translateY(-1px)}

.mode-card strong{font-size:19px;color:#172033}.mode-card span{color:#68738a}

.question-head{display:flex;justify-content:space-between;gap:20px;margin:25px 0 12px;color:#475569}

.explain-chatgpt-button{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.explain-chatgpt-button>span{font-size:18px;line-height:1}
.explain-chatgpt-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.explain-chatgpt-button svg.chatgpt-logo{fill:currentColor;stroke:none}
.explain-chatgpt-button:focus-visible{outline:3px solid #75b8ff;outline-offset:3px}

.question-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:22px;box-shadow:0 3px 15px rgba(0,0,0,.04)}

.question-text{font-size:22px;font-weight:600;margin:20px 0 24px;line-height:1.55}

.scenario{background:#f1f5f9;border-left:4px solid #64748b;padding:15px;margin:15px 0}

.options{border:0;padding:0;margin:0 0 25px}

.option{display:block;padding:14px;margin:10px 0;border:1px solid #dbe1ea;border-radius:9px;cursor:pointer;background:#fff;transition:.15s}

.option:hover{background:#f8fafc;border-color:#b8c3d4}

.option input{margin-right:8px}

.option.is-correct{border-color:#16a34a;background:#ecfdf3;box-shadow:inset 4px 0 0 #16a34a}

.option.is-wrong{border-color:#dc2626;background:#fef2f2;box-shadow:inset 4px 0 0 #dc2626}

.option.is-correct strong,.option.is-correct .option-status{color:#166534}

.option.is-wrong strong,.option.is-wrong .option-status{color:#991b1b}

.option-status{float:right;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}

.answer-list{margin:20px 0}

.answer-row{padding:13px;border:1px solid #e1e6ef;border-radius:8px;margin:8px 0;background:#fafbfe}

.answer-row.correct{border-left:4px solid #16803c;background:#f2fbf5}

.badge{float:right;font-size:12px;background:#dff5e7;color:#166534;padding:3px 7px;border-radius:10px}

.explanation{margin-top:24px;padding:18px;background:#f1f5f9;border-left:4px solid #64748b;border-radius:0 8px 8px 0}

.qmedia{margin:18px 0;text-align:center}.qmedia img,.qimage{max-width:100%;height:auto;display:block;margin:15px auto;border-radius:8px}.qmedia figcaption{font-size:13px;color:#667085;margin-top:5px}

.pager,.nav{display:flex;justify-content:space-between;gap:15px;margin:25px 0}

.navigator{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0}.navigator a{width:36px;height:36px;border:1px solid #d1d5db;border-radius:7px;display:grid;place-items:center;text-decoration:none;color:inherit;background:#fff}.navigator a.active{background:#2563eb;color:#fff;border-color:#2563eb}

.result-box{background:#fff;border:1px solid #e1e6ef;border-radius:12px;padding:30px;margin:20px 0;display:flex;justify-content:space-between;font-size:28px}.score{font-size:56px;font-weight:800;margin:20px 0}

.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}.answer-grid>div{padding:14px;background:#fff;border:1px solid #e2e8f0;border-radius:8px}

.drag-list{min-height:100px}.drag-item{display:grid;grid-template-columns:30px 1fr auto auto;gap:8px;align-items:center;padding:14px;background:#eef2ff;border:1px solid #c7d2fe;margin:8px 0;border-radius:8px;cursor:grab}.move-up,.move-down{border:1px solid #cbd5e1;background:#fff;border-radius:6px;padding:5px 8px;cursor:pointer}

.review{display:block;margin-top:18px}.submit{margin-top:20px}.full{width:100%}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:900px){.grid,.mode-grid{grid-template-columns:1fr 1fr}.wrap{margin:25px auto}}

@media(max-width:800px){.grid,.mode-grid{grid-template-columns:1fr}.exam-layout{grid-template-columns:1fr}.navigator{position:static}.top{padding:0 15px}.wrap{margin:20px auto;padding:0 15px}.question-text{font-size:19px}.question-head{align-items:flex-start;flex-direction:column}.answer-grid{grid-template-columns:1fr}.pager .btn,.nav .btn{padding:10px 13px}}

.hero{padding:30px;margin-bottom:30px}.hero h1{font-size:36px;margin:6px 0 8px}.hero p{max-width:720px;color:#68738a;font-size:17px}.section-title{margin-top:42px}.vendor-card{text-decoration:none;color:inherit;display:flex;justify-content:space-between;align-items:center;gap:20px}.vendor-card span{color:#68738a;font-size:14px}

/* ============================================================

   Practice + Mock UI compatibility layer

   Version 4.1.2

   These rules intentionally live in app.css as well as the
   page-specific stylesheets so the public exam pages remain
   correctly styled even when a host/CDN caches secondary CSS.

   ============================================================ */

.practice-page,.mock-page{min-height:calc(100vh - 64px)}

.practice-page .question-card,.practice-page .question-card.card{max-width:900px;margin:0 auto}

.practice-page .question-head{max-width:900px;margin:25px auto 12px}

.practice-page .question-text{font-size:20px;font-weight:600;line-height:1.6}

.practice-page .option{position:relative;display:flex;align-items:flex-start;gap:8px}

.practice-page .option input{margin-top:4px;flex:0 0 auto}

.practice-page .option>span:not(.option-status){flex:1}

.practice-page .option-status{margin-left:12px;white-space:nowrap}

.practice-page .answer-result{max-width:900px;margin:24px auto 0;padding:20px;border-radius:12px;border:1px solid #dfe5ef}

.practice-page .answer-result.is-correct{background:#f0fbf4;border-color:#91d2a8}

.practice-page .answer-result.is-wrong{background:#fff5f5;border-color:#e0a0a0}

.practice-page .answer-result.is-correct h3{color:#166534}

.practice-page .answer-result.is-wrong h3{color:#991b1b}

.practice-page .pager,.practice-page .navigator{max-width:900px;margin-left:auto;margin-right:auto}

.practice-page .navigator{justify-content:center}

.mock-start .card{max-width:760px;margin:0 auto}

.mock-start h1{margin:6px 0 8px}

.mock-start h2{margin:0 0 20px;color:#334155;font-size:22px}

.mock-start .exam-summary{padding:18px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px}

.mock-start .exam-summary p{margin:8px 0}

.mock-start .actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px}

.mock-layout .question-area{min-width:0}

.mock-layout .question.card{margin-bottom:0}

.mock-layout .question.card h3{margin-top:0}

.mock-layout .navigator.card{align-self:start;padding:18px;position:sticky;top:20px}

.mock-layout .navigator #palette{display:flex;flex-wrap:wrap;gap:5px}

.mock-layout .navigator .q-number{margin:0}

.mock-layout .review{margin-top:18px}

.mock-layout .nav{margin-bottom:0}

.mock-layout #timer{font-variant-numeric:tabular-nums}

.mock-layout .option{display:block}

.mock-result-page .review-card{margin-bottom:0}

.mock-result-page .navigator{justify-content:center}

@media(max-width:800px){

  .mock-start .actions{flex-direction:column-reverse;align-items:stretch}

  .mock-start .actions .btn{width:100%;text-align:center}

  .mock-layout .navigator.card{position:static;order:-1}

  .mock-layout .question.card{padding:18px}

}


/* Practice page: always-visible return action */

.practice-exam-actions{max-width:900px;margin:12px auto 28px;display:flex;justify-content:flex-start}

.practice-exam-actions .btn{min-width:150px;text-align:center}

@media(max-width:800px){.practice-exam-actions{width:100%}.practice-exam-actions .btn{width:100%}}


/* ============================================================
   Study floating navigation
   ============================================================ */

.study-floating-nav {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: rgba(255,255,255,.96);
    border: 1px solid #dbe1ea;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0,0,0,.12);
    backdrop-filter: blur(6px);
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    user-select: none;
    touch-action: auto;
}

.study-floating-nav[data-position="top-center"] { top: 12px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
.study-floating-nav[data-position="bottom-center"] { top: auto; bottom: 18px; left: 50%; right: auto; transform: translateX(-50%); }
.study-floating-nav[data-position="left-center"] { top: 50%; bottom: auto; left: 12px; right: auto; transform: translateY(-50%); }
.study-floating-nav[data-position="right-center"] { top: 50%; bottom: auto; left: auto; right: 12px; transform: translateY(-50%); }
.study-floating-nav[data-position="bottom-right"] { top: auto; bottom: 18px; left: auto; right: 12px; transform: none; }

.study-floating-nav .button {
    min-width: 120px;
    text-align: center;
}

.study-floating-nav .is-disabled {
    opacity: .45;
    cursor: default;
    pointer-events: none;
}

.study-nav-drag-handle {
    width: 30px;
    min-width: 30px;
    height: 42px;
    border: 0;
    border-radius: 8px;
    background: #eef2f7;
    color: #475569;
    font-size: 19px;
    cursor: grab;
    touch-action: none;
    flex: 0 0 30px;
}

.study-floating-nav.is-dragging .study-nav-drag-handle { cursor: grabbing; }
.study-floating-nav.is-dragging { transform: none !important; }
.study-nav-position { min-width: 56px; color: #475569; font-size: 13px; font-weight: 700; text-align: center; white-space: nowrap; }
.study-floating-nav .study-nav-help { min-width: 42px; padding: 8px 10px; }
.study-floating-nav .nav-help-icon { position: static; width: auto; height: auto; display: inline-block; }

@media (max-width: 600px) {
    body {
        padding-bottom: 82px;
    }

    .study-floating-nav {
        left: 12px;
        right: 12px;
        bottom: 12px;
        transform: none;
        justify-content: space-between;
    }

    .study-floating-nav .button {
        flex: 1;
        min-width: 0;
        padding: 11px 12px;
    }

    .study-nav-drag-handle { min-width: 26px; width: 26px; height: 38px; }
    .study-nav-position { min-width: 46px; font-size: 12px; }
    .study-floating-nav .study-nav-help, .study-floating-nav .nav-help-icon { display: none; }
}

/* ============================================================
   v4.1.6 - Study Read Aloud
   ============================================================ */

.read-aloud-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.read-aloud-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.read-aloud-status {
    font-size: 14px;
    color: #6b7280;
}

@media (max-width: 600px) {
    .read-aloud-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .read-aloud-controls .button {
        width: 100%;
    }
}

.public-exam-page .breadcrumbs{margin:0 0 20px;color:#68738a;font-size:14px}
.public-exam-page .breadcrumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.public-exam-page .breadcrumbs li+li::before{content:'›';margin-right:8px;color:#94a3b8}
.public-exam-page .breadcrumbs a{color:inherit}
.public-exam-page .exam-intro h1{margin-top:8px}
.public-exam-page .exam-identifiers,.public-exam-page .exam-facts{display:flex;flex-wrap:wrap;gap:10px 22px}
.public-exam-page .exam-facts{padding-left:20px}
.public-exam-page .topic-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.public-exam-page .topic-card{margin:0}
@media(max-width:700px){.public-exam-page .topic-list{grid-template-columns:1fr}.public-exam-page .exam-identifiers{flex-direction:column;gap:4px}}

.public-question-page .breadcrumbs{margin:0 0 20px;color:#68738a;font-size:14px}
.public-question-page .breadcrumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.public-question-page .breadcrumbs li+li::before{content:'›';margin-right:8px;color:#94a3b8}
.public-question-page .breadcrumbs a{color:inherit}
.public-question-page .question-card{max-width:900px;margin:0 auto}
.public-question-page .question-card ul,.public-question-page .question-card ol{padding-left:24px}
.public-question-page .question-card .answer-row{padding:13px}
.public-question-page .public-match-answer{margin:0}
.public-question-page .public-match-answer .answer-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.public-question-page .public-match-answer dt{font-weight:700}
.public-question-page .public-match-answer dd{margin:0}
.public-question-page .question-seo-links{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}
.public-exam-page .public-question-index ol{padding-left:28px}
.public-exam-page .public-question-index li{padding:7px 0}
.public-exam-page .public-question-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px}
@media(max-width:700px){.public-question-page .public-match-answer .answer-row{grid-template-columns:1fr;gap:5px}.public-question-page .question-seo-links{flex-direction:column}.public-question-page .question-seo-links .button{text-align:center}}
.preview-notice{margin:14px 0;padding:12px 16px;border:1px solid #b9d8fa;border-radius:10px;background:#eef7ff;color:#17365e;line-height:1.5}.preview-notice a{font-weight:700}.exam-reviews{margin-top:26px;padding:20px}.exam-review{padding:12px 0;border-top:1px solid #e5ebf3}.review-form{display:grid;gap:8px;max-width:680px;margin-top:20px}.review-form label{font-weight:650}.review-form textarea{min-height:120px;padding:10px;border:1px solid #cdd8e7;border-radius:8px;font:inherit}.review-form select,.review-form button{width:max-content;padding:10px;border:1px solid #cdd8e7;border-radius:8px;background:#fff;color:inherit;font:inherit}.review-form button{border-color:#0866ff;background:#0866ff;color:#fff;cursor:pointer}.home-exam-title{color:inherit;text-decoration:none}.home-exam-title:hover{text-decoration:underline;color:#0874ff}
.exam-page-header,.learner-mode-header{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr);align-items:center;gap:14px;min-height:58px}
.exam-page-header>.page-header-back,.learner-mode-header>.page-header-back{grid-column:1;justify-self:start;margin:0}
.exam-page-header>strong,.learner-mode-header>strong:not(#timer),.learner-mode-header>b{grid-column:2;justify-self:center;max-width:min(54vw,700px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.page-header-actions,.mode-header-actions{grid-column:3;justify-self:end;display:flex;align-items:center;gap:14px;min-width:0}
.review-rating{margin:0;padding:0;border:0}.review-rating legend{margin-bottom:5px;font-weight:650}.review-stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:3px;width:max-content}.review-stars input{position:absolute;width:1px;height:1px;opacity:0}.review-stars label{color:#b8c3d2;font-size:30px;line-height:1;cursor:pointer}.review-stars input:checked~label,.review-stars label:hover,.review-stars label:hover~label{color:#f5a623}.review-stars input:focus-visible+label{outline:3px solid #75b8ff;outline-offset:2px;border-radius:3px}.review-form fieldset+label{margin-top:5px}.review-form button{width:max-content;padding:10px 16px;border:1px solid #0866ff;border-radius:8px;background:#0866ff;color:#fff;font:inherit;cursor:pointer}
.home-sample-testimonials{margin-top:14px}.home-sample-testimonials blockquote{margin:0 0 10px;color:#344968;font-size:14px;line-height:1.65}.home-sample-testimonials article>span{color:#7a879b;font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:760px){.exam-page-header,.learner-mode-header{grid-template-columns:minmax(0,1fr) auto;gap:8px;padding-block:9px}.exam-page-header>.page-header-back,.learner-mode-header>.page-header-back{grid-column:1;grid-row:1}.exam-page-header>strong,.learner-mode-header>strong:not(#timer),.learner-mode-header>b{grid-column:1/-1;grid-row:2;justify-self:center;max-width:calc(100vw - 28px);white-space:normal}.page-header-actions,.mode-header-actions{grid-column:2;grid-row:1;gap:8px}.mode-header-actions #timer{font-size:13px}.review-stars label{font-size:28px}}