/* ============================================================================ Exam-prep interactive component kit Self-contained, no external assets. Loaded only on examprep lesson pages. Progressive enhancement: interactive styles are scoped under `.pp-ready`, which examprep-kit.js adds to once it wires the components up. With JavaScript off, the `.pp-ready` rules never apply, so flashcards and step blocks fall back to plain, fully readable content. ============================================================================ */ :root { --pp-accent: #3b82f6; --pp-accent-soft: #eff6ff; --pp-correct: #16a34a; --pp-correct-soft: #ecfdf5; --pp-wrong: #dc2626; --pp-wrong-soft: #fef2f2; --pp-border: #e5e7eb; --pp-muted: #6b7280; } /* ── Instant-feedback MCQ ───────────────────────────────────────────────── The choices themselves keep their existing Bootstrap look; the kit only adds result state after the student picks an answer. */ .pp-ready .examprep-mcq .examprep-choice { cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } .pp-ready .examprep-mcq.pp-answered .examprep-choice { cursor: default; } .pp-ready .examprep-choice.pp-correct { border-color: var(--pp-correct) !important; background: var(--pp-correct-soft); } .pp-ready .examprep-choice.pp-wrong { border-color: var(--pp-wrong) !important; background: var(--pp-wrong-soft); } .pp-ready .examprep-choice .pp-mark { margin-left: auto; flex-shrink: 0; font-weight: 700; line-height: 1; } .pp-ready .examprep-choice.pp-correct .pp-mark { color: var(--pp-correct); } .pp-ready .examprep-choice.pp-wrong .pp-mark { color: var(--pp-wrong); } .pp-feedback { margin-top: .75rem; padding: .75rem 1rem; border-radius: .5rem; border-left: 4px solid var(--pp-border); background: #f9fafb; animation: pp-fade .2s ease; } .pp-feedback.pp-is-correct { border-left-color: var(--pp-correct); background: var(--pp-correct-soft); } .pp-feedback.pp-is-wrong { border-left-color: var(--pp-wrong); background: var(--pp-wrong-soft); } .pp-feedback-verdict { font-weight: 600; margin: 0 0 .35rem; } .pp-feedback.pp-is-correct .pp-feedback-verdict { color: var(--pp-correct); } .pp-feedback.pp-is-wrong .pp-feedback-verdict { color: var(--pp-wrong); } .pp-feedback-explain > :last-child { margin-bottom: 0; } /* Running score chip shown once every question is answered. */ .pp-score { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .9rem; border-radius: 999px; font-weight: 600; background: var(--pp-accent-soft); color: var(--pp-accent); animation: pp-fade .2s ease; } /* ── Step reveal ──────────────────────────────────────────────────────────
with .pp-step children. */ .pp-ready .pp-steps .pp-step { display: none; animation: pp-fade .2s ease; } .pp-ready .pp-steps .pp-step.pp-shown { display: block; } .pp-steps .pp-step + .pp-step { margin-top: .75rem; } .pp-steps-more { margin-top: .85rem; display: inline-flex; align-items: center; gap: .4rem; } .pp-steps-progress { font-size: .85rem; color: var(--pp-muted); margin-left: .6rem; } /* ── Flashcards ───────────────────────────────────────────────────────────
with .pp-card (front/back). */ .pp-ready .pp-flashcards { max-width: 34rem; } .pp-ready .pp-flashcards .pp-card { display: none; position: relative; min-height: 9rem; border: 1px solid var(--pp-border); border-radius: .75rem; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); cursor: pointer; user-select: none; } .pp-ready .pp-flashcards .pp-card.pp-active { display: block; } .pp-ready .pp-flashcards .pp-card-front, .pp-ready .pp-flashcards .pp-card-back { display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; min-height: 9rem; font-size: 1.35rem; font-weight: 600; } .pp-ready .pp-flashcards .pp-card-back { display: none; color: var(--pp-accent); } .pp-ready .pp-flashcards .pp-card.pp-flipped .pp-card-front { display: none; } .pp-ready .pp-flashcards .pp-card.pp-flipped .pp-card-back { display: flex; } .pp-ready .pp-flashcards .pp-card::after { content: "↻"; position: absolute; top: .5rem; right: .75rem; color: var(--pp-muted); font-size: 1rem; } .pp-flashcards-nav { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .75rem; } .pp-flashcards-count { font-size: .85rem; color: var(--pp-muted); } @keyframes pp-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } /* Dark-mode courtesy: only if the site sets a dark theme flag. Kept minimal. */ @media (prefers-color-scheme: dark) { :root { --pp-accent-soft: #1e293b; --pp-correct-soft: #052e1c; --pp-wrong-soft: #3b0d0d; --pp-border: #374151; } .pp-ready .pp-flashcards .pp-card { background: #111827; } .pp-feedback { background: #1f2937; } } /* ============================================================================ SAT READING & WRITING (`sr-*`) added 2026-09-07 ---------------------------------------------------------------------------- The digital SAT gives EVERY question its own short passage (25–150 words), so an R&W lesson is mostly passage → question → four choices, over and over. Inline-styling that shape a few hundred times is what these classes exist to avoid. Pure CSS, no JavaScript, mobile-first — same contract as the pe-*, pm-* and ps-* kits. Never invent an `sr-*` class without adding it HERE and to examprep/management/commands/STYLE_GUIDE_SAT_RW.md first. ============================================================================ */ :root { --sr-paper: #fbfaf7; /* the Bluebook passage pane */ --sr-ink: #1f2937; --sr-rule: #d6d3cd; --sr-mark: #7c3aed; /* the thing the question is asking about */ } /* ── The passage pane ───────────────────────────────────────────────────── Where the pupil meets English exactly as the test prints it. Serif on purpose: it should not look like the Uzbek teaching around it. */ .sr-passage { background: var(--sr-paper); border: 1px solid var(--sr-rule); border-left: 4px solid #94a3b8; border-radius: 10px; padding: 1rem 1.1rem; margin: 1rem 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.02rem; line-height: 1.65; color: var(--sr-ink); } .sr-passage p { margin: 0 0 .7rem; } .sr-passage p:last-child { margin-bottom: 0; } .sr-passage__src { display: block; margin-top: .75rem; font-family: inherit; font-size: .85rem; font-style: italic; color: var(--pp-muted); } /* Poetry and anything else whose line breaks are the point. */ .sr-passage--verse p { white-space: pre-line; margin-bottom: .4rem; } /* ── The blank ──────────────────────────────────────────────────────────── Transitions and Conventions questions print an underlined gap. */ .sr-blank { display: inline-block; min-width: 4.5em; border-bottom: 2px solid var(--sr-mark); vertical-align: baseline; } /* The stretch of text a Words-in-Context / Boundaries question points at. */ .sr-focus { background: #f3e8ff; border-bottom: 2px solid var(--sr-mark); padding: 0 .15em; } /* ── Student notes card (Rhetorical Synthesis) ──────────────────────────── That question type always opens with a pupil's research bullets. */ .sr-notes { background: #fffef5; border: 1px dashed #d4c99a; border-radius: 10px; padding: .9rem 1.1rem; margin: 1rem 0; } .sr-notes__head { font-weight: 600; font-size: .9rem; color: #92742b; margin: 0 0 .5rem; } .sr-notes ul { margin: 0; padding-left: 1.15rem; } .sr-notes li { margin-bottom: .3rem; line-height: 1.5; } /* ── Data card (Command of Evidence — Quantitative) ─────────────────────── Wraps a table or figure so a wide one scrolls inside itself on a phone instead of pushing the page sideways. */ .sr-data { margin: 1rem 0; } .sr-data__title { font-weight: 600; font-size: .95rem; margin: 0 0 .5rem; } .sr-data__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .sr-data table { border-collapse: collapse; min-width: 320px; width: 100%; font-size: .92rem; } .sr-data th, .sr-data td { border: 1px solid var(--sr-rule); padding: .4rem .6rem; text-align: left; } .sr-data th { background: #f1f5f9; font-weight: 600; } .sr-data td + td, .sr-data th + th { text-align: right; } /* ── Choice autopsy ─────────────────────────────────────────────────────── Goes in `explanation`: every wrong choice named, with the reason it was put there. This is the course's whole pedagogy in one box. */ .sr-why { margin: .75rem 0 0; } .sr-why__row { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem 0; border-top: 1px solid var(--pp-border); } .sr-why__row:first-child { border-top: 0; } .sr-why__tag { flex: 0 0 auto; font-size: .78rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; white-space: nowrap; } .sr-why__row--ok .sr-why__tag { background: var(--pp-correct-soft); color: var(--pp-correct); } .sr-why__row--no .sr-why__tag { background: var(--pp-wrong-soft); color: var(--pp-wrong); } .sr-why__text { flex: 1 1 auto; line-height: 1.5; } .sr-why__text b { color: var(--sr-ink); } /* ── Pacing chip ────────────────────────────────────────────────────────── R&W allows ~71 seconds a question. Say so, on worked examples. */ .sr-time { display: inline-block; background: #eef2ff; color: #4338ca; border-radius: 999px; padding: .15rem .7rem; font-size: .82rem; font-weight: 600; margin: .25rem 0; } @media (max-width: 480px) { .sr-passage { padding: .85rem .9rem; font-size: .98rem; } .sr-why__row { flex-direction: column; gap: .25rem; } } @media (prefers-color-scheme: dark) { :root { --sr-paper: #17202e; --sr-ink: #e5e7eb; --sr-rule: #374151; } .sr-focus { background: #3b2a5c; } .sr-notes { background: #1f2937; border-color: #4b5563; } .sr-notes__head { color: #d9b96a; } .sr-data th { background: #1f2937; } }