/* ================================================================
   patterns.css
   ----------------------------------------------------------------
   Styling for the Number & Shape Patterns (A.1-D.2) skill-quiz
   popup on the Class 6 Math page. Every skill shares ONE generic
   quiz modal (see patterns.js) instead of one bespoke widget per
   skill, so this file only needs to style the small set of reusable
   "visual" building blocks a pattern question can show above its
   answer chips: a row of sequence chips, a set of worked-example
   rows, a real-world word-problem box, a dot grid, and a number
   pyramid. Loaded as a plain stylesheet link alongside
   quiz-popup-theme.css / quiz-modal-responsive.css, which already
   supply the shared .quiz-overlay / .quiz-modal / .card / .bq-* /
   .quiz-number-opt / .slot-dot rules every skill popup on the site
   uses.
   ================================================================ */

/* ---- Sequence chips (numbers, shapes, or A/B placeholders in a row) ---- */
.pat-seq-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 16px auto 6px;
    max-width: 480px;
}
.pat-seq-chip {
    min-width: 46px;
    height: 46px;
    padding: 0 10px;
    border-radius: 14px;
    background: #f3f4f6;
    border: 2px solid var(--line, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: #3d4758;
    box-shadow: 0 3px 0 rgba(0,0,0,0.06);
}
.pat-seq-chip.pat-seq-blank {
    background: color-mix(in srgb, var(--sky, #7ecbff) 18%, white);
    border-color: var(--sky, #7ecbff);
    color: var(--secondary, #1d4ed8);
}

/* ---- Worked-example rule rows (digit-pattern puzzles, matchstick rules) ---- */
.pat-rule-rows {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 14px auto 6px;
}
.pat-rule-row {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 3.6vw, 17px);
    color: #4a5568;
    background: #f8f9fb;
    border: 2px solid var(--line, #e2e8f0);
    border-radius: 12px;
    padding: 8px 16px;
    white-space: nowrap;
}
.pat-rule-row-question {
    border-color: var(--sky, #7ecbff);
    background: color-mix(in srgb, var(--sky, #7ecbff) 14%, white);
    color: #1d4ed8;
}

/* ---- Real-world word-problem context box ---- */
.pat-word-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 14px auto 6px;
    max-width: 420px;
    padding: 12px 18px;
    border-radius: 14px;
    background: #fff8ec;
    border: 2px dashed var(--sun, #f5b942);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #6b4b1a;
    text-align: center;
}

/* ---- Dot grid (square-number patterns) ---- */
.pat-dot-grid {
    display: grid;
    gap: 6px;
    width: fit-content;
    margin: 16px auto 8px;
}
.pat-dot {
    width: clamp(12px, 3.4vw, 20px);
    height: clamp(12px, 3.4vw, 20px);
    border-radius: 50%;
    background: var(--secondary, #4c6ef5);
}

/* ---- Number pyramid ---- */
.pat-pyramid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 16px auto 8px;
}
.pat-pyramid-row {
    display: flex;
    gap: 8px;
}
.pat-pyramid-cell {
    min-width: 34px;
    height: 34px;
    padding: 0 6px;
    border-radius: 10px;
    background: #f3f4f6;
    border: 2px solid var(--line, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #3d4758;
}
.pat-pyramid-ellipsis {
    font-size: 20px;
    color: #8a94a6;
    justify-content: center;
}

/* ---- Answer chips: reuse the shared quiz-number-opt button, but
   pattern answers are often full sentences/pairs ("A = 27, B = 51")
   rather than a single digit, so this overrides the shared fixed
   circle sizing to a pill that grows to fit its own text and wraps
   onto a second line if it doesn't fit one row. ---- */
.pat-options-wrap {
    margin: 14px auto 0;
    max-width: 480px;
    box-sizing: border-box;
}

/* Scoped to #patternOptions so these rules out-specificity the shared
   quiz theme's ".quiz-number-opt" / ".quiz-number-options" styles
   (built for single-digit 0-9 answers), which would otherwise keep
   forcing a fixed circular size + nowrap text onto pattern answers
   that are numbers, rule sentences, or "A = x, B = y" pairs — causing
   the text to overflow its box, wrap one word per line, or overlap
   the neighbouring option. !important is used as a hard guarantee
   against any future theme rule loaded after this file. */
#patternOptions.quiz-number-options {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100%;
    box-sizing: border-box;
}
#patternOptions .pat-opt-btn {
    width: auto !important;
    height: auto !important;
    min-width: 64px !important;
    min-height: 48px !important;
    max-width: 100%;
    flex: 0 1 auto !important;
    border-radius: 16px !important;
    padding: 10px 18px !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal !important;
    line-height: 1.25 !important;
    text-align: center !important;
    box-sizing: border-box;
}
#patternOptions .pat-opt-btn.is-correct-choice {
    border-color: #10b981;
    background: color-mix(in srgb, #10b981 14%, white);
    color: #0d7a53;
}
#patternOptions .pat-opt-btn.is-wrong-choice {
    border-color: #ef4444;
    background: color-mix(in srgb, #ef4444 14%, white);
    color: #b91c1c;
}
#patternOptions .pat-opt-btn:disabled {
    cursor: default;
    transform: none;
}

/* Feedback + summary stars, scoped so they render correctly even if
   the shared theme file doesn't already style these modifier
   classes. */
#patternQuizCard .bq-feedback.is-correct { color: #0d7a53; }
#patternQuizCard .bq-feedback.is-wrong { color: #b91c1c; }
#patternSummaryCard .bq-star {
    font-size: 28px;
    color: #d1d5db;
    margin: 0 2px;
}
#patternSummaryCard .bq-star.filled { color: #f5b942; }

/* ---- Mobile responsiveness ---- */
@media (max-width: 560px) {
    .pat-seq-chip { min-width: 40px; height: 40px; font-size: 16px; }
    .pat-pyramid-cell { min-width: 28px; height: 28px; font-size: 13px; }
    .pat-rule-row { font-size: 13px; padding: 7px 12px; }
}