/* Question Paper Card Styles */

.question-card {
    background: var(--color-bg-surface, #ffffff);
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: var(--radius-lg, 16px);
    padding: var(--spacing-5, 16px) var(--spacing-6, 20px);
    margin: var(--spacing-5, 16px) 0;
    page-break-inside: avoid;
}

.question-card.has-image {
    padding: var(--spacing-6, 20px) var(--spacing-7, 24px);
}

/* Question Header */
.question-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-4, 12px);
    gap: var(--spacing-4, 12px);
}

.question-left {
    display: flex;
    align-items: flex-start;
    flex: 1;
    gap: var(--spacing-3, 8px);
}

.question-number {
    font-weight: var(--font-weight-bold, 700);
    font-size: var(--font-size-lg, 18px);
    color: var(--color-text-primary, #111827);
    min-width: 30px;
    flex-shrink: 0;
}

.question-text {
    font-size: var(--font-size-md, 16px);
    line-height: var(--line-height-normal, 1.5);
    color: var(--color-text-primary, #111827);
    flex: 1;
}

.question-marks {
    font-weight: var(--font-weight-bold, 700);
    font-size: var(--font-size-md, 16px);
    color: var(--color-primary-600, #1e6ce0);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Question Image */
.question-image {
    text-align: center;
    margin: var(--spacing-4, 12px) 0;
}

.question-image img {
    max-width: 100%;
    height: auto;
    max-height: 400px;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(16, 24, 40, 0.08));
}

/* MCQ Options */
.mcq-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4, 12px) var(--spacing-6, 20px);
    margin-top: var(--spacing-4, 12px);
}

.mcq-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-3, 8px);
}

.option-content {
    display: flex;
    gap: var(--spacing-2, 4px);
    flex: 1;
}

.option-label {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #111827);
    flex-shrink: 0;
}

.option-text {
    font-size: var(--font-size-sm, 14px);
    color: var(--color-text-secondary, #6b7280);
    line-height: var(--line-height-normal, 1.5);
}

.option-indicator {
    font-size: 20px;
    color: var(--color-neutral-400, #9ca3af);
    flex-shrink: 0;
}

/* Answer Lines */
.answer-lines {
    margin-top: var(--spacing-4, 12px);
}

.answer-line {
    border-bottom: 1px solid var(--color-neutral-300, #d1d5db);
    height: 32px;
    margin-bottom: var(--spacing-3);
}

/* Numerical Answer Box */
.numerical-answer-box {
    margin-top: var(--spacing-4);
    padding: var(--spacing-5);
    border: 2px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    text-align: center;
    background: var(--color-bg-subtle);
}

.answer-box-label {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-3);
}

.answer-box-line {
    font-size: var(--font-size-lg);
    letter-spacing: 2px;
    color: var(--color-neutral-500);
}

/* True/False Options */
.true-false-options {
    display: flex;
    gap: var(--spacing-8);
    margin-top: var(--spacing-4);
    justify-content: flex-start;
}

.tf-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.tf-option .option-label {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.tf-option .option-indicator {
    font-size: 20px;
    color: var(--color-neutral-400);
}

/* Print Styles */
@media print {
    .question-card {
        border: 1px solid #ddd;
        box-shadow: none;
        page-break-inside: avoid;
        margin: 15px 0;
    }
    
    .question-image img {
        max-width: 500px;
        max-height: 350px;
        page-break-inside: avoid;
    }
    
    .mcq-options {
        gap: 12px 20px;
    }
    
    .answer-line {
        height: 28px;
        margin-bottom: 10px;
    }
}

/* ==========================================================================
   EXAM QUESTION CARD — NCERT Workbook paper wrapper
   Matches the qa-workbook-answers.html design:
     • Cream paper background with ruled-line overlay
     • Header: Q# + [TYPE badge] + difficulty LEFT, [marks] RIGHT
     • Dashed separator between consecutive cards
   ========================================================================== */

.exam-question-card {
    background: #fdfbf7;
    border: 1px solid #e8e0d0;
    border-radius: 4px;
    padding: 16px 20px 14px;
    position: relative;
    overflow: visible;
}

/* ruled lines overlay */
.exam-question-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        transparent,
        transparent 27px,
        rgba(160, 140, 100, 0.10) 28px
    );
    pointer-events: none;
    border-radius: 4px;
}

/* dashed divider between sibling question cards */
.exam-question-card + .exam-question-card {
    border-top: 1.5px dashed #c4b898;
    border-radius: 0 0 4px 4px;
    margin-top: 0;
}
.exam-question-card:first-child {
    border-radius: 4px 4px 4px 4px;
}
.exam-question-card:not(:first-child) {
    border-top: none;
    border-radius: 0 0 4px 4px;
}

/* ── Header row ── */
.eqc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 2px;
    position: relative;
    z-index: 1;
}

.eqc-header-left {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.eqc-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding-top: 1px;
}

/* Q1. number */
.eqc-num {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a1a;
    flex-shrink: 0;
}

/* [TYPE] badge — border only, no fill (workbook inline label) */
.eqc-badge-type {
    font-family: Arial, sans-serif;
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #555;
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 1px 5px;
    background: transparent;
    vertical-align: middle;
    line-height: 1.5;
}

/* [n] marks — bracket format right side */
.eqc-badge-marks {
    font-family: Arial, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: #333;
    line-height: 1;
}
.eqc-badge-marks::before { content: '['; }
.eqc-badge-marks::after  { content: ']'; }

/* difficulty pills */
.eqc-badge-diff {
    font-family: Arial, sans-serif;
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 10px;
    vertical-align: middle;
    line-height: 1.5;
}
.eqc-diff-easy   { background: #dcfce7; color: #166534; }
.eqc-diff-medium { background: #fef9c3; color: #854d0e; }
.eqc-diff-hard   { background: #fee2e2; color: #991b1b; }
.eqc-diff-hots   { background: #fef3c7; color: #b45309; }

/* diagram */
.eqc-diagram { margin: 12px 0; text-align: center; position: relative; z-index: 1; }
.eqc-diagram-img {
    max-width: 100%; height: auto; max-height: 380px;
    border: 1px solid #d4c8b0; border-radius: 4px;
}
.eqc-diagram-caption {
    font-family: Arial, sans-serif; font-size: 0.78rem;
    color: #666; margin-top: 6px; font-style: italic;
}

/* fallback (unknown type) */
.eqc-fallback { position: relative; z-index: 1; }
.eqc-answer-hint {
    margin-top: 12px;
    border-left: 3px solid #15803d;
    padding: 8px 12px;
    background: #f0faf4;
    border-radius: 0 4px 4px 0;
}
.eqc-answer-label {
    font-family: Arial, sans-serif;
    font-size: 0.65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.09em;
    color: #14532d; display: block; margin-bottom: 4px;
}

/* ==========================================================================
   NCERT WORKBOOK — Book-style question renderer base styles
   Used by all 13 QuestionRenderer components.
   Toggle button is kept for student mode (ShowAnswer=false).
   When ShowAnswer=true, answers are always visible (workbook/teacher mode).
   ========================================================================== */

/* ── Shared renderer wrapper ── */
.wb-renderer {
    font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
    font-size: 0.95rem;
    color: #1a1a1a;
    line-height: 1.75;
    position: relative;
    z-index: 1;
}

/* ── Question text ── */
.wb-q-text {
    font-size: 0.95rem;
    line-height: 1.75;
    color: #1a1a1a;
    margin-bottom: 12px;
}

/* ── Star rating row ── */
.wb-stars { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.wb-star-btn { background: none; border: none; padding: 0 2px; font-size: 1.2rem; cursor: pointer; transition: transform 0.15s; line-height: 1; }
.wb-star-btn:hover { transform: scale(1.15); }

/* ── Answer block — green left-border NCERT "✓ Answer" style ── */
.wb-answer {
    margin-top: 14px;
    border-left: 3px solid #15803d;
    padding: 10px 14px;
    background: #f0faf4;
    border-radius: 0 4px 4px 0;
    animation: wbSlideDown 0.25s ease-out;
}
.wb-answer .wb-ans-label {
    font-family: Arial, sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #14532d;
    margin-bottom: 6px;
    display: block;
}
.wb-answer .wb-ans-label::before { content: '✓ '; }
.wb-answer .wb-ans-body {
    font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
    font-size: 0.88rem;
    line-height: 1.75;
    color: #14532d;
}
.wb-answer .wb-ans-body p { margin-bottom: 6px; }
.wb-answer .wb-ans-body p:last-child { margin-bottom: 0; }

/* ── Hint block — amber ── */
.wb-hint {
    margin-top: 10px;
    border-left: 3px solid #d97706;
    padding: 8px 12px;
    background: #fffbeb;
    border-radius: 0 4px 4px 0;
    font-size: 0.85rem;
    color: #78350f;
    animation: wbSlideDown 0.25s ease-out;
}
.wb-hint .wb-hint-label {
    font-family: Arial, sans-serif;
    font-size: 0.68rem; font-weight: bold;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: #92400e; margin-bottom: 4px; display: block;
}

/* ── Explanation block — blue ── */
.wb-explanation {
    margin-top: 10px;
    border-left: 3px solid #3b82f6;
    padding: 8px 12px;
    background: #eff6ff;
    border-radius: 0 4px 4px 0;
    font-size: 0.85rem;
    color: #1e40af;
    animation: wbSlideDown 0.25s ease-out;
    overflow-wrap: break-word;
    word-wrap: break-word;
    overflow: visible;
}
.wb-explanation .wb-expl-label {
    font-family: Arial, sans-serif;
    font-size: 0.68rem; font-weight: bold;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: #1d4ed8; margin-bottom: 4px; display: block;
}

/* ── Toggle buttons (student mode) ── */
.wb-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.wb-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px;
    font-family: Arial, sans-serif;
    font-size: 0.75rem; font-weight: 600;
    border: 1px solid currentColor; border-radius: 4px;
    cursor: pointer; background: none;
    transition: background 0.15s;
}
.wb-btn-ans { color: #2a6a2a; }
.wb-btn-ans:hover { background: #f0fdf0; }
.wb-btn-hint { color: #92400e; }
.wb-btn-hint:hover { background: #fefce8; }

/* ── 1. MCQ options ── */
.wb-mcq-opts {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 6px 24px; margin-top: 10px; margin-bottom: 4px;
}
@media (max-width: 480px) { .wb-mcq-opts { grid-template-columns: 1fr; } }
.wb-mcq-opt {
    display: flex; align-items: flex-start; gap: 6px;
    padding: 5px 8px; border-radius: 3px;
    font-size: 0.9rem; line-height: 1.5;
    border: 1px solid transparent;
}
.wb-mcq-opt .wb-opt-lbl { font-weight: bold; flex-shrink: 0; min-width: 20px; }
.wb-mcq-opt.wb-correct {
    background: #edfbea;
    border-color: #6db96d;
}
.wb-mcq-opt.wb-correct .wb-opt-lbl { color: #2a7a2a; }
.wb-mcq-tick { margin-left: auto; color: #2a7a2a; font-weight: bold; flex-shrink: 0; padding-left: 4px; }

/* ── 2. Fill blanks ── */
.wb-blank {
    display: inline-block;
    border-bottom: 2px solid #888;
    min-width: 80px; margin: 0 4px;
    vertical-align: bottom; text-align: center;
}
.wb-blank-filled {
    display: inline-block;
    border-bottom: 2px solid #2a7a2a;
    min-width: 80px; margin: 0 4px;
    vertical-align: bottom;
    color: #1e5e1e;
    font-weight: 700;
    font-style: italic;
    text-align: center;
    padding: 0 6px;
    font-family: Georgia, 'Times New Roman', serif;
}

/* ── 5. True / False ── */
.wb-tf-choices { display: flex; gap: 16px; margin: 10px 0; flex-wrap: wrap; }
.wb-tf-choice {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.9rem;
}
.wb-tf-circle {
    width: 22px; height: 22px;
    border: 1.5px solid #555; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 0.65rem; font-weight: bold;
}
.wb-tf-circle.wb-correct-circle {
    background: #2a7a2a; border-color: #2a7a2a; color: #fff;
}
.wb-tf-choice.wb-correct-choice .wb-tf-label { font-weight: bold; color: #2a7a2a; }

/* ── 6. Match the Following ── */
.wb-match-cols {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; margin: 10px 0;
}
@media (max-width: 480px) { .wb-match-cols { grid-template-columns: 1fr; } }
.wb-match-col { }
.wb-match-col-head {
    font-family: Arial, sans-serif; font-size: 0.72rem;
    font-weight: bold; text-transform: uppercase;
    letter-spacing: 0.08em; color: #444;
    padding-bottom: 6px; border-bottom: 1.5px solid #333;
    margin-bottom: 6px;
}
.wb-match-row {
    display: flex; align-items: flex-start; gap: 7px;
    padding: 4px 6px; border-bottom: 1px dashed #ddd;
    font-size: 0.88rem; line-height: 1.5;
}
.wb-match-row:last-child { border-bottom: none; }
.wb-match-lbl {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; flex-shrink: 0;
    border: 1px solid #777; border-radius: 50%;
    font-size: 0.7rem; font-weight: bold; color: #444;
}
/* Matched pairs table (shown when answer visible) */
.wb-match-pairs { margin-top: 10px; }
.wb-match-pair-row {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 4px 0; border-bottom: 1px dashed #cce5cc;
    font-size: 0.88rem; line-height: 1.5;
}
.wb-match-pair-row:last-child { border-bottom: none; }
.wb-match-pair-row.wb-matched { background: #f7fcf6; padding: 4px 6px; border-radius: 3px; }
.wb-match-arrow { color: #2a6a2a; font-weight: bold; font-family: Arial, sans-serif; flex-shrink: 0; padding: 0 4px; }

/* ── 8. Assertion & Reason ── */
.wb-ar-directions {
    font-size: 0.82rem; line-height: 1.65;
    padding: 8px 12px; border: 1px solid #ddd; background: #f9f9f9;
    border-radius: 3px; margin-bottom: 12px;
}
.wb-ar-table { border: 1px solid #ccc; border-radius: 3px; overflow: hidden; margin: 10px 0; }
.wb-ar-row { display: flex; border-bottom: 1px solid #ccc; }
.wb-ar-row:last-child { border-bottom: none; }
.wb-ar-cell-label {
    background: #f5f5f5; font-weight: bold; font-size: 0.82rem;
    padding: 8px 12px; min-width: 130px; flex-shrink: 0;
    border-right: 1px solid #ccc; color: #333; line-height: 1.4;
}
.wb-ar-cell-text { padding: 8px 12px; flex: 1; line-height: 1.5; font-size: 0.9rem; }
.wb-ar-opts { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.wb-ar-opt {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 6px 10px; border-radius: 3px;
    font-size: 0.88rem; line-height: 1.5;
    border: 1px solid #e5e5e5; background: #fafafa;
}
.wb-ar-opt.wb-ar-correct { background: #edfbea; border-color: #6db96d; font-weight: 600; color: #1a4a1a; }
.wb-ar-opt-lbl { font-weight: bold; min-width: 22px; flex-shrink: 0; }
.wb-ar-opt.wb-ar-correct .wb-ar-opt-lbl { color: #2a6a2a; }

/* ── 9. Case Study ── */
.wb-case-passage {
    border: 1px solid #bbb; border-top: 3px solid #555;
    padding: 12px 16px; margin-bottom: 12px;
    background: #fafafa; font-size: 0.9rem; line-height: 1.8;
    border-radius: 0 0 4px 4px;
}
.wb-case-passage .wb-passage-label {
    font-family: Arial, sans-serif; font-size: 0.68rem;
    font-weight: bold; text-transform: uppercase;
    letter-spacing: 0.1em; color: #666; margin-bottom: 8px; display: block;
}

/* ── 12. Numericals ── */
.wb-given-find {
    display: grid; grid-template-columns: 1fr 1fr;
    border: 1px solid #ccc; border-radius: 3px; margin: 10px 0;
    font-size: 0.88rem;
}
@media (max-width: 480px) { .wb-given-find { grid-template-columns: 1fr; } }
.wb-given-cell, .wb-find-cell { padding: 8px 12px; }
.wb-given-cell { border-right: 1px solid #ccc; background: #f9f9f9; }
.wb-gf-label {
    font-family: Arial, sans-serif; font-size: 0.68rem;
    font-weight: bold; text-transform: uppercase;
    letter-spacing: 0.08em; color: #666; margin-bottom: 4px; display: block;
}
.wb-formula-box {
    border: 1px dashed #aaa; padding: 8px 14px; margin: 8px 0;
    background: #f9f9f9; text-align: center; font-style: italic;
    font-size: 0.9rem; border-radius: 3px;
}
.wb-formula-label {
    font-family: Arial, sans-serif; font-size: 0.68rem;
    font-style: normal; color: #999; text-transform: uppercase;
    display: block; margin-bottom: 4px;
}
.wb-solution-steps { margin-top: 8px; }
.wb-solution-step {
    display: flex; gap: 10px; padding: 5px 0;
    border-bottom: 1px solid #e6f4e6;
    font-size: 0.88rem; line-height: 1.65; align-items: baseline;
}
.wb-solution-step:last-child { border-bottom: none; }
.wb-step-lbl {
    font-family: Arial, sans-serif; font-size: 0.7rem;
    color: #777; min-width: 56px; flex-shrink: 0; padding-top: 2px;
}
.wb-step-math { flex: 1; font-style: italic; }
.wb-step-result { font-weight: bold; color: #1a4a1a; white-space: nowrap; padding-left: 8px; flex-shrink: 0; }
.wb-final-answer {
    margin-top: 10px; padding: 8px 14px;
    background: #edfbea; border: 1.5px solid #6db96d;
    border-radius: 3px; display: flex; gap: 10px;
    align-items: center; flex-wrap: wrap; font-size: 0.9rem;
}
.wb-final-label {
    font-family: Arial, sans-serif; font-size: 0.7rem;
    font-weight: bold; text-transform: uppercase;
    letter-spacing: 0.08em; color: #2a6a2a; flex-shrink: 0;
}
.wb-final-val { color: #1a3a1a; font-weight: bold; }

/* ── 13. Theorem / Proof ── */
.wb-theorem-stmt {
    border-left: 4px solid #4f46e5;
    padding: 10px 14px; background: #eef2ff;
    border-radius: 0 4px 4px 0; margin-bottom: 12px;
}
.wb-theorem-stmt .wb-stmt-label {
    font-family: Arial, sans-serif; font-size: 0.68rem;
    font-weight: bold; text-transform: uppercase;
    letter-spacing: 0.1em; color: #4338ca; margin-bottom: 6px; display: block;
}
.wb-proof-step-row {
    display: flex; gap: 10px; padding: 5px 0;
    border-bottom: 1px solid #e6e6f4;
    font-size: 0.88rem; line-height: 1.65; align-items: baseline;
}
.wb-proof-step-row:last-child { border-bottom: none; }
.wb-proof-step-num {
    font-family: Arial, sans-serif; font-size: 0.7rem;
    color: #6666aa; min-width: 50px; flex-shrink: 0; padding-top: 2px;
}

/* ── Slide-down animation ── */
@keyframes wbSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}