/*
 * paper-engine.css — shared visual layer for interactive IB practice papers.
 * Include this stylesheet alongside `practice-paper-engine.js`. Paper HTML
 * files may still add page-specific overrides, but everything in this file
 * should be considered the canonical look-and-feel.
 */

/* Question card */
.q-card { background:#fff; border:1px solid #dfe8fa; border-left:5px solid #0d3d8f; border-radius:12px; padding:22px 26px; margin-bottom:24px; box-shadow:0 2px 6px rgba(6,37,89,0.04); }
.q-card .q-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; flex-wrap:wrap; gap:6px; }
.q-card h2 { color:#062559; margin:0; font-size:1.05rem; letter-spacing:-0.2px; }
.q-card .q-marks { background:#eaf3ff; color:#0d3d8f; font-size:0.72rem; font-weight:700; padding:3px 9px; border-radius:999px; letter-spacing:0.3px; }
.q-card .q-topic { display:block; color:#8a4a08; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.q-card p, .q-card ol { color:#3a4a68; font-size:0.95rem; line-height:1.65; margin:8px 0; }
.q-card ol { padding-left: 22px; }
.q-card ol li { margin-bottom: 6px; }
.marks-inline { color:#8a4a08; font-weight:700; }
.q-card table.data-tbl { width:100%; border-collapse:collapse; margin: 12px 0; font-size:0.85rem; }
.q-card table.data-tbl th, .q-card table.data-tbl td { padding:6px 8px; border:1px solid #dfe8fa; text-align:center; }
.q-card table.data-tbl th { background:#eaf3ff; color:#062559; font-weight:700; }

/* Figures / SVG diagrams */
.q-card .q-fig { margin: 14px 0; padding: 16px 20px; background:#fafcff; border:1px solid #dfe8fa; border-radius:10px; text-align:center; }
.q-card .q-fig svg { max-width: 100%; height: auto; display:inline-block; }
.q-card .q-fig figcaption { color:#6b7a99; font-size:0.82rem; font-style:italic; margin-top:8px; }
.q-card .q-fig[data-align="left"] { text-align:left; }
.q-card .q-fig[data-align="right"] { text-align:right; }
/* Backwards-compat: legacy `.fig-caption` used in older papers */
.q-card .fig-caption { display:block; margin: 12px 0; padding: 12px 16px; background:#fafcff; border:1px dashed #b7c9ea; border-radius:8px; color:#3a4a68; font-size:0.9rem; font-style:italic; }

/* Answer row + feedback */
.ans-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin: 10px 0 4px; padding: 10px 14px; background:#fafcff; border:1px solid #eaf1fb; border-radius:8px; }
.ans-row label { color:#062559; font-size:0.88rem; font-weight:600; margin-right:4px; min-width:120px; }
.ans-input { flex:1; min-width:130px; padding:8px 10px; border:2px solid #d6dfec; border-radius:6px; font-size:0.95rem; font-family:inherit; color:#062559; background:#fff; transition:border-color .15s; }
.ans-input:focus { outline:none; border-color:#0d3d8f; }
.ans-input.correct { border-color:#1a7d3d; background:#f0fbf3; }
.ans-input.wrong { border-color:#c22c2c; background:#fdf1f1; }
.ans-submit { background:#0d3d8f; color:#fff; border:none; font-weight:700; font-size:0.85rem; padding:9px 16px; border-radius:6px; cursor:pointer; transition:background .15s; }
.ans-submit:hover { background:#0a2f6f; }
.ans-feedback { flex-basis:100%; font-size:0.85rem; font-weight:700; margin-top:4px; min-height:1.2em; }
.ans-feedback.correct { color:#1a7d3d; }
.ans-feedback.wrong { color:#c22c2c; }
.ans-hint { color:#6b7a99; font-size:0.78rem; font-style:italic; flex-basis:100%; }

/* Solution reveal */
.sol-toggle { background:#f0f4fb; border:1px solid #d6dfec; color:#062559; font-weight:600; font-size:0.85rem; padding:7px 14px; border-radius:6px; cursor:pointer; margin-top:10px; transition:all .15s; }
.sol-toggle:hover { background:#e4ecf7; }
.sol-body { display:none; margin-top:12px; padding: 14px 18px; background:#f4f9f4; border-left:4px solid #1a7d3d; border-radius:6px; color:#2a3a48; font-size:0.9rem; line-height:1.7; }
.sol-body.open { display:block; }
.sol-body strong { color:#0d3d8f; }