/* q-single.css - shared styles for single-screen question pages. Loaded by every page in /q/ alongside style.css. Question pages use .ss-* class prefix to avoid clashes with the older layout. */ @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap'); :root { --bg:#eef4ff; --surface:#ffffff; --ink:#1a1a40; --ink-soft:#5b5b80; --ink-faint:#a0a4c2; --primary:#6f5af6; --primary-deep:#4c39d4; --primary-soft:#f3effe; --gold:#f5b400; --gold-soft:#fff6d9; --correct:#22c55e; --correct-soft:#dcfce7; --wrong:#ef4444; --wrong-soft:#fee2e2; --hint:#0ea5e9; --hint-soft:#e0f2fe; --gray:#e1e8f5; --shadow:0 4px 0 rgba(76,57,212,.18); --shadow-soft:0 2px 0 #e1e8f5; } .ss-page * { box-sizing: border-box; } body.ss-body { font-family:'Fredoka',sans-serif; background:var(--bg); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100vh; margin:0; } .ss-page { max-width:760px; margin:0 auto; padding:14px 18px 24px; display:flex; flex-direction:column; gap:12px; } .ss-meta { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:.82rem; flex-wrap:wrap; } .ss-topic { background:var(--surface); padding:6px 14px; border-radius:18px; font-weight:600; color:var(--primary); box-shadow:var(--shadow-soft); display:flex; gap:8px; align-items:center; } .ss-topic .ss-badge { background:var(--primary); color:#fff; padding:2px 8px; border-radius:10px; font-size:.72rem; } .ss-back { color:var(--ink-soft); text-decoration:none; font-weight:600; padding:6px 12px; border-radius:14px; } .ss-back:hover { background:rgba(255,255,255,.6); } .ss-timer { background:var(--surface); padding:6px 12px; border-radius:14px; font-weight:700; font-size:.82rem; color:var(--primary-deep); box-shadow:var(--shadow-soft); font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; gap:4px; transition:color .2s, background .2s; } .ss-timer.stopped { color:#15803d; background:var(--correct-soft); } .ss-card { background:var(--surface); border-radius:18px; padding:24px 26px; box-shadow:var(--shadow); border-bottom:5px solid var(--primary); display:flex; flex-direction:column; gap:16px; } .ss-question { font-size:1.45rem; font-weight:700; line-height:1.25; color:var(--ink); letter-spacing:-.01em; } .ss-question strong { color:var(--primary); background:var(--primary-soft); padding:0 5px; border-radius:5px; } /* Roman-numeral tokens: generous letter-spacing + monospace glyphs so adjacent strokes can't blur together (e.g. XLIV misread as XLV). FB3-1. */ .ss-question strong.roman-num { font-family:'Courier New',ui-monospace,monospace; letter-spacing:.22em; padding-right:1px; } .ss-sub { color:var(--ink); font-size:1rem; margin-top:-4px; } /* Word puzzles where the pupil reads a pair like "boo [ ? ] ing" — each pair gets its own row so the brackets don't smush into the surrounding sentence. Used by bracket-letter pages. */ .ss-bracket-pairs { display:flex; flex-direction:column; gap:10px; margin:14px 0 6px; align-items:center; } .ss-bracket-pair { font-size:1.6rem; font-weight:800; font-family:'Fredoka','Nunito',sans-serif; color:var(--ink); letter-spacing:.04em; display:inline-flex; align-items:center; gap:10px; background:#f5f3ff; padding:10px 22px; border-radius:12px; } .ss-bracket-slot { color:#7c3aed; background:#fff; padding:2px 10px; border-radius:8px; border:2px dashed #c4b5fd; font-weight:900; } @media (max-width: 480px) { .ss-bracket-pair { font-size:1.3rem; padding:8px 14px; } } /* "Group 1 / Group 2" word boxes (antonyms, synonyms). All three words must read as one row — a single word dropping to a second line looks like a fourth item in the group. Each word is a nowrap span so a word can never break mid-way. flex-wrap:nowrap makes the row's min-content width the WHOLE row, so the box it sits in can never be squeezed narrower than the three words — the two boxes wrap onto separate lines instead. That is self-tuning: no guessed breakpoint decides when they stack. */ .ss-word-row { display:flex; flex-wrap:nowrap; gap:0 18px; font-size:1.15rem; font-weight:700; } .ss-word-row span { white-space:nowrap; } @media (max-width: 560px) { .ss-word-row { font-size:1.05rem; gap:0 14px; } } @media (max-width: 400px) { .ss-word-row { font-size:0.95rem; gap:0 10px; } } .ss-options { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; } .ss-options.opts-4 { grid-template-columns:repeat(4,1fr); } .ss-options.opts-3 { grid-template-columns:repeat(3,1fr); } .ss-options.opts-2 { grid-template-columns:repeat(2,1fr); } .ss-options.opts-stack { grid-template-columns:1fr; } /* min-width:0 lets a grid track shrink below the longest word (grid items default to min-width:auto, which turns 1fr into a floor and pushes the row past the screen edge on narrow devices); hyphens:auto lets a long word like "rectangle" shrink to "rectan-gle" instead of forcing horizontal overflow. */ .ss-opt { display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 8px; border:2px solid var(--gray); border-radius:14px; background:var(--surface); font-family:inherit; cursor:pointer; transition:transform .12s, box-shadow .12s, border-color .12s; min-height:80px; justify-content:center; text-align:center; min-width:0; overflow-wrap:break-word; hyphens:auto; } .ss-opt:hover { border-color:var(--primary); transform:translateY(-1px); box-shadow:0 4px 0 var(--gray); } .ss-letter { font-size:.7rem; color:var(--ink-faint); font-weight:600; letter-spacing:.05em; } .ss-num { font-size:1.5rem; font-weight:700; color:var(--ink); } .ss-opt-stacked { padding:14px 18px !important; flex-direction:row !important; align-items:center !important; gap:14px !important; min-height:0 !important; } .ss-opt-stacked .ss-num { font-size:1.05rem !important; } /* §1.11 — letter/short-token options: hide the redundant grey choice-key and centre the bold label. Slight letter-spacing keeps "IV"/"VI" legible. */ .ss-options.opts-letter .ss-letter { display:none; } .ss-options.opts-letter .ss-opt { flex-direction:column !important; gap:0 !important; justify-content:center !important; } .ss-options.opts-letter .ss-num { text-align:center; letter-spacing:.08em; } .ss-opt.selected { border-color:var(--primary); background:var(--primary-soft); box-shadow:0 4px 0 var(--primary); } .ss-opt.selected .ss-letter, .ss-opt.selected .ss-num { color:var(--primary-deep); } .ss-opt.correct { border-color:var(--correct); background:var(--correct-soft); box-shadow:0 4px 0 #15803d; animation:ssPop .35s; } .ss-opt.wrong { border-color:var(--wrong); background:var(--wrong-soft); box-shadow:0 4px 0 #b91c1c; animation:ssShake .4s; } .ss-opt.previously-correct { border-color:var(--correct); background:var(--correct-soft); } .ss-opt.previously-wrong { border-color:#fca5a5; background:#fef2f2; opacity:.85; } @keyframes ssPop { 0%{transform:scale(1)} 40%{transform:scale(1.06)} 100%{transform:scale(1)} } @keyframes ssShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} } /* Tablets and phones (≤820px): row-style (stacked) buttons carry ~64px of fixed padding+gap before their text starts, so five across can never fit — the row used to spill past the screen edge and clip option E. Give each stacked button a full-width row (the layout it was designed for). Word wrapping stays intact; numeric pages just become a tidy vertical list. */ @media (max-width:820px) { .ss-options > .ss-opt-stacked { grid-column: 1 / -1; } } @media (max-width:560px) { /* Answer grid: collapse 5-column to 3+2 wrap, 4-column to 2x2 */ .ss-options { grid-template-columns: repeat(3, 1fr); gap:5px; } .ss-options.opts-4 { grid-template-columns: repeat(2, 1fr); } .ss-options.opts-3 { grid-template-columns: repeat(3, 1fr); } .ss-options.opts-2 { grid-template-columns: repeat(2, 1fr); } .ss-opt { padding:10px 4px; min-height:62px; } .ss-num { font-size:1.1rem; } .ss-card { padding:14px 12px; } /* SVG picture panels: scroll horizontally if too wide */ .ss-panel .visual-area { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ss-panel svg { min-width: 0; } /* Session meta strip: stack on small screens */ .ss-meta { flex-direction: column; align-items: flex-start; gap:6px; } .ss-page { padding: 8px 12px 20px; } } /* --- Variant: text/number input answer --- */ .ss-input-wrap { display:flex; gap:10px; align-items:center; padding:10px 14px; background:var(--bg); border-radius:14px; } .ss-input-wrap .ss-input-prefix, .ss-input-wrap .ss-input-suffix { font-weight:700; color:var(--ink-soft); font-size:1.1rem; white-space:nowrap; } .ss-input { flex:1; padding:14px 16px; border:2px solid var(--gray); border-radius:10px; font-family:inherit; font-size:1.2rem; font-weight:700; color:var(--ink); background:var(--surface); text-align:center; outline:none; transition:border-color .12s, box-shadow .12s; min-width:0; } .ss-input:focus { border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); } .ss-input.correct { border-color:var(--correct); background:var(--correct-soft); color:#15803d; } .ss-input.wrong { border-color:var(--wrong); background:var(--wrong-soft); color:#7f1d1d; animation:ssShake .4s; } /* --- Variant: fraction input (whole + num/den) --- */ .ss-frac-row { display:flex; align-items:center; justify-content:center; gap:14px; padding:14px; background:var(--bg); border-radius:14px; flex-wrap:wrap; } .ss-frac-mixed { display:flex; align-items:center; gap:8px; } .ss-frac-mixed-label { font-weight:700; color:var(--ink-soft); font-size:.85rem; } .ss-frac-stack { display:inline-flex; flex-direction:column; align-items:center; } .ss-frac-stack .ss-input { width:72px; font-size:1.4rem; padding:8px 6px; } .ss-frac-stack .ss-frac-line { width:80px; height:3px; background:var(--ink); border-radius:2px; margin:4px 0; } .ss-frac-and { font-weight:700; color:var(--ink-soft); font-size:.95rem; padding:0 6px; } /* --- Inline stacked fraction (question stem) --- */ .q-frac { display:inline-flex; flex-direction:column; align-items:center; line-height:1.1; vertical-align:middle; font-size:.85em; margin:0 1px; } .q-frac-num { border-bottom:1.5px solid currentColor; padding:0 3px 1px; text-align:center; } .q-frac-den { padding:1px 3px 0; text-align:center; } /* --- Variant: NVR shape grid (4-up SVG buttons) --- */ .ss-options.opts-shape { grid-template-columns:repeat(4, 1fr); gap:10px; } /* min-width:0 lets a grid track shrink below its content (grid items default to min-width:auto, which turns a fixed-size option image into a floor and pushes the row past the screen edge on narrow devices). */ .ss-opt-shape { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px; border:2px solid var(--gray); border-radius:14px; background:var(--surface); cursor:pointer; transition:transform .12s, box-shadow .12s, border-color .12s; min-height:110px; justify-content:center; font-family:inherit; font-weight:600; font-size:.85rem; color:var(--ink); min-width:0; } .ss-opt-shape:hover { border-color:var(--primary); transform:translateY(-1px); box-shadow:0 4px 0 var(--gray); } .ss-opt-shape.selected { border-color:var(--primary); background:var(--primary-soft); box-shadow:0 4px 0 var(--primary); } .ss-opt-shape.correct { border-color:var(--correct); background:var(--correct-soft); box-shadow:0 4px 0 #15803d; animation:ssPop .35s; } .ss-opt-shape.wrong { border-color:var(--wrong); background:var(--wrong-soft); box-shadow:0 4px 0 #b91c1c; animation:ssShake .4s; } .ss-opt-shape.previously-correct { border-color:var(--correct); background:var(--correct-soft); } .ss-opt-shape.previously-wrong { border-color:#fca5a5; background:#fef2f2; opacity:.85; } .ss-opt-shape svg { display:block; max-width:60px; max-height:60px; } .ss-opt-shape .ss-letter { font-size:.7rem; color:var(--ink-faint); } /* Tablets and phones (≤820px): some pages set their option images to ~118px via inline styles (overriding the 60px cap above), so four or five across cannot fit and the row used to spill past the screen edge. Two across gives each image a ~250px slot — plenty even for the largest options. */ @media (max-width:820px) { .ss-options.opts-shape { grid-template-columns:repeat(2, 1fr); } } /* --- Variant: multi-part (two word groups, pick one from each) --- */ .ss-multi-groups { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .ss-multi-group { background:var(--bg); padding:12px; border-radius:12px; } .ss-multi-group-label { font-size:.78rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; } .ss-multi-opts { display:flex; flex-direction:column; gap:6px; } .ss-multi-opt { display:flex; align-items:center; gap:10px; padding:10px 12px; border:2px solid var(--gray); border-radius:10px; background:var(--surface); font-family:inherit; font-weight:600; font-size:.92rem; color:var(--ink); cursor:pointer; transition:all .12s; } .ss-multi-opt:hover { border-color:var(--primary); } .ss-multi-opt.selected { border-color:var(--primary); background:var(--primary-soft); } .ss-multi-opt-letter { background:var(--gray); color:var(--ink-soft); width:24px; height:24px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.72rem; flex-shrink:0; } .ss-multi-opt.selected .ss-multi-opt-letter { background:var(--primary); color:#fff; } .ss-multi-opt.correct { border-color:var(--correct); background:var(--correct-soft); } .ss-multi-opt.wrong { border-color:var(--wrong); background:var(--wrong-soft); animation:ssShake .4s; } .ss-multi-opt.previously-correct { border-color:var(--correct); background:var(--correct-soft); } .ss-multi-opt.previously-wrong { border-color:#fca5a5; background:#fef2f2; opacity:.85; } @media (max-width:560px) { .ss-multi-groups { grid-template-columns:1fr; } } /* --- Variant: cloze (fill-the-gap with chip choices per gap) --- */ .ss-cloze-passage { background:#fffbeb; border-left:5px solid var(--gold); border-radius:12px; padding:18px 22px; font-size:1.02rem; line-height:2.0; color:#5b4101; font-weight:500; } .ss-cloze-passage p { margin-bottom:10px; } .ss-cloze-blank { display:inline-block; min-width:96px; border-bottom:3px solid var(--primary); margin:0 4px; color:var(--primary); font-weight:800; text-align:center; padding:0 6px 2px; vertical-align:bottom; transition:color .2s, background .2s; } .ss-cloze-blank.filled { color:var(--ink); border-bottom-color:var(--primary-deep); } .ss-cloze-blank.correct-blank { color:#14532d; background:var(--correct-soft); border-bottom-color:var(--correct); border-radius:4px; } .ss-cloze-blank.wrong-blank { color:#7f1d1d; background:var(--wrong-soft); border-bottom-color:var(--wrong); border-radius:4px; } .ss-cloze-blank-num { font-size:.68rem; vertical-align:super; color:var(--ink-faint); font-weight:700; margin-right:2px; } .ss-cloze-group { background:var(--bg); border-radius:12px; padding:12px 14px; margin-top:10px; } .ss-cloze-group-label { font-size:.78rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; } .ss-cloze-group-label .ss-cloze-num { color:var(--primary); font-weight:800; } .ss-cloze-chips { display:flex; flex-wrap:wrap; gap:6px; } .ss-cloze-chip { background:var(--surface); border:2px solid var(--gray); border-radius:10px; padding:7px 14px; font-family:inherit; font-weight:700; font-size:.92rem; color:var(--ink); cursor:pointer; transition:all .12s; } .ss-cloze-chip:hover:not(.used) { border-color:var(--primary); background:var(--primary-soft); } .ss-cloze-chip.selected { border-color:var(--primary); background:var(--primary); color:#fff; } .ss-cloze-gap-fb { font-size:.85rem; font-weight:700; margin-top:6px; min-height:1.2em; } .ss-cloze-gap-fb.ok { color:#15803d; } .ss-cloze-gap-fb.wrong { color:var(--wrong); } @media (max-width:560px) { .ss-cloze-blank { min-width:74px; } .ss-cloze-chip { padding:6px 10px; font-size:.85rem; } } /* --- Variant: comprehension passage --- */ .ss-passage { background:#fffbeb; border:1px solid #fde68a; border-left:5px solid var(--gold); border-radius:12px; padding:16px 18px; max-height:280px; overflow-y:auto; font-size:.95rem; line-height:1.7; color:#5b4101; } .ss-passage h3 { color:#7c5e00; font-size:1rem; font-weight:700; margin-bottom:8px; } .ss-passage p { margin-bottom:10px; } .ss-passage .line-num { display:inline-block; min-width:1.5em; margin-right:.6em; font-style:normal; font-weight:800; font-size:.78rem; color:#92610a; background:#fde68a; padding:1px 6px; border-radius:6px; text-align:center; vertical-align:1px; } .ss-sub-q { background:var(--bg); border-radius:12px; padding:14px 16px; margin-top:12px; } .ss-sub-q-num { background:var(--primary); color:#fff; padding:2px 10px; border-radius:10px; font-size:.72rem; font-weight:700; display:inline-block; margin-bottom:6px; } .ss-sub-q-prompt { font-weight:600; color:var(--ink); margin-bottom:10px; } .ss-sub-fb { display:none; } .ss-sub-fb.show { display:block; margin-top:10px; padding:10px 12px; border-radius:10px; font-size:.88rem; line-height:1.5; } .ss-sub-fb.show.ok { background:var(--correct-soft); border-left:4px solid var(--correct); color:#14532d; } .ss-sub-fb.show.wrong { background:var(--wrong-soft); border-left:4px solid var(--wrong); color:#7f1d1d; } .ss-submit { background:var(--primary); color:#fff; border:none; padding:14px; border-radius:12px; font-family:inherit; font-weight:700; font-size:.98rem; cursor:pointer; width:100%; box-shadow:var(--shadow); text-transform:uppercase; letter-spacing:.05em; transition:transform .12s; } .ss-submit:hover:not(:disabled) { transform:translateY(-1px); } .ss-submit:active:not(:disabled) { transform:translateY(2px); box-shadow:none; } .ss-submit:disabled { background:var(--gray); color:var(--ink-faint); cursor:not-allowed; box-shadow:none; } .ss-feedback { display:none; padding:14px 16px; border-radius:12px; align-items:flex-start; gap:12px; font-size:.95rem; } .ss-feedback.correct { display:flex; background:var(--correct-soft); border:2px solid var(--correct); color:#14532d; } .ss-feedback.wrong { display:flex; background:var(--wrong-soft); border:2px solid var(--wrong); color:#7f1d1d; } .ss-feedback-ico { font-size:1.5rem; line-height:1; } .ss-feedback strong { display:block; margin-bottom:2px; } .ss-state-banner { padding:12px 14px; border-radius:12px; display:flex; align-items:center; gap:12px; font-weight:600; font-size:.9rem; } .ss-state-banner.mastered { background:#dcfce7; border:2px solid #22c55e; color:#15803d; } .ss-state-banner.tried { background:#fef3c7; border:2px solid #f59e0b; color:#854d0e; } .ss-state-banner .state-ico { font-size:1.5rem; } .ss-state-banner .state-body { flex:1; line-height:1.35; } .ss-state-banner .state-body small { display:block; font-weight:400; opacity:.85; font-size:.83rem; } .ss-state-banner .try-again-btn { background:#22c55e; color:#fff; border:none; padding:8px 14px; border-radius:8px; font-family:inherit; font-weight:700; font-size:.85rem; cursor:pointer; white-space:nowrap; } .ss-state-banner .try-again-btn:hover { background:#16a34a; } .ss-help-strip { display:flex; gap:8px; flex-wrap:wrap; border-top:1px dashed var(--gray); padding-top:14px; } .ss-help-btn { flex:1; min-width:120px; display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 12px; border:2px solid var(--gray); background:var(--surface); border-radius:10px; font-family:inherit; font-weight:600; font-size:.85rem; color:var(--ink); cursor:pointer; transition:all .12s; position:relative; } .ss-help-btn:hover:not(:disabled) { border-color:var(--hint); background:var(--hint-soft); color:#075985; } .ss-help-btn.active { border-color:var(--primary); background:var(--primary-soft); color:var(--primary-deep); } .ss-help-btn .ss-cost { position:absolute; top:-7px; right:-6px; background:var(--gold); color:#fff; border-radius:10px; padding:1px 7px; font-size:.65rem; font-weight:700; } .ss-help-btn.locked { opacity:.55; cursor:not-allowed; border-style:dashed; } .ss-help-btn.unlocked { border-color:var(--correct); background:var(--correct-soft); color:#15803d; } .ss-panel { display:none; background:var(--hint-soft); border-left:4px solid var(--hint); padding:14px 16px; border-radius:8px; font-size:.92rem; line-height:1.6; animation:ssSlide .25s ease-out; } .ss-panel.open { display:block; } .ss-panel.ss-solution { background:var(--primary-soft); border-left-color:var(--primary); } .ss-panel.ss-picture { background:#fff; border-left-color:var(--gold); padding:18px; } @keyframes ssSlide { from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)} } .ss-panel h4 { font-size:.95rem; margin-bottom:6px; color:var(--ink); } .ss-panel ol { padding-left:20px; margin:8px 0; } .ss-panel li { margin:4px 0; } .ss-panel .ss-tip { margin-top:10px; padding-top:8px; border-top:1px dashed rgba(0,0,0,.1); font-size:.82rem; font-style:italic; color:var(--ink-soft); } .ss-panel svg { max-width:100%; height:auto; display:block; } .ss-panel .visual-area { margin: 0; } .ss-panel .steps-box { background:rgba(255,255,255,.6); border-radius:8px; padding:10px 12px; margin-bottom:10px; } .ss-panel .steps-box h3 { font-size:.92rem; margin-bottom:6px; color:var(--ink); } .ss-panel .solution-step { display:flex; gap:10px; margin:8px 0; align-items:flex-start; } .ss-panel .step-num { background:var(--primary); color:#fff; min-width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.78rem; flex-shrink:0; } .ss-panel .step-content { flex:1; } .ss-panel .solution-answer { background:var(--correct); color:#fff; padding:10px 14px; border-radius:10px; font-weight:700; margin-top:10px; } /* Full corrected sentence, shown after the answer prose so the pupil sees the actual fix written out rather than only a description of it. */ .ss-panel .ss-corrected { background:#fff; border:2px solid var(--correct); border-radius:10px; padding:10px 14px; margin-top:10px; } .ss-panel .ss-corrected-label { display:block; font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#15803d; margin-bottom:4px; } .ss-panel .ss-corrected p { margin:0; font-weight:600; color:var(--ink); font-size:1rem; line-height:1.5; } .ss-panel .ss-corrected mark { background:#bbf7d0; color:#14532d; border-radius:4px; padding:0 3px; font-weight:800; } .ss-hint-item { background:#fff; border-radius:8px; padding:10px 12px; margin-top:8px; display:flex; gap:10px; border-left:3px solid var(--hint); } .ss-hint-num { background:var(--hint); color:#fff; width:20px; height:20px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.72rem; flex-shrink:0; } .ss-locked-toast { background:#fff6d9; color:#7c5e00; border:2px solid #f5b400; padding:10px 14px; border-radius:10px; font-weight:600; font-size:.88rem; margin-top:6px; animation:ssSlide .25s; } .ss-reflect { display:none; background:var(--gold-soft); border-radius:10px; padding:12px 14px; } .ss-reflect.show { display:block; } .ss-reflect h4 { font-size:.85rem; margin-bottom:8px; color:#7c5e00; } .ss-reflect-btn { display:block; width:100%; text-align:left; padding:9px 12px; margin-bottom:5px; border:1.5px solid #fde68a; background:#fff; border-radius:8px; font-family:inherit; font-size:.85rem; font-weight:500; color:var(--ink); cursor:pointer; } .ss-reflect-btn:hover { border-color:var(--gold); background:var(--gold-soft); } .ss-reflect-btn.right { background:var(--correct); color:#fff; border-color:var(--correct); } .ss-reflect-btn.wrong { background:var(--wrong-soft); border-color:var(--wrong); color:#7f1d1d; animation:ssShake .35s; } .ss-reflect-btn.dim { opacity:.45; } .ss-reflect-btn:disabled { cursor:default; } .ss-reflect-feedback { display:none; margin-top:10px; padding:10px 12px; border-radius:8px; font-size:.85rem; line-height:1.4; animation:ssSlide .25s; } .ss-reflect-feedback.show { display:block; } .ss-reflect-feedback.correct { background:var(--correct-soft); border-left:3px solid var(--correct); color:#14532d; } .ss-reflect-feedback.wrong { background:var(--wrong-soft); border-left:3px solid var(--wrong); color:#7f1d1d; } .ss-nav { display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding:12px 14px; background:var(--surface); border-radius:12px; box-shadow:var(--shadow-soft); gap:10px; } .ss-nav-btn { flex:0 0 auto; padding:9px 16px; border-radius:10px; text-decoration:none; font-weight:600; font-size:.88rem; background:var(--primary); color:#fff !important; box-shadow:var(--shadow); transition:transform .12s; max-width:42%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ss-nav-btn:link, .ss-nav-btn:visited, .ss-nav-btn:hover, .ss-nav-btn:active, .ss-nav-btn:focus { color:#fff; } .ss-nav-btn:hover { transform:translateY(-1px); background:var(--primary-deep); } .ss-nav-btn.prev { background:var(--bg); color:var(--ink) !important; box-shadow:var(--shadow-soft); } .ss-nav-btn.prev:link, .ss-nav-btn.prev:visited, .ss-nav-btn.prev:hover, .ss-nav-btn.prev:active, .ss-nav-btn.prev:focus { color:var(--ink); } .ss-nav-btn.prev:hover { background:var(--gray); } .ss-nav-btn.disabled { opacity:.4; pointer-events:none; } .ss-nav-pos { flex:1; text-align:center; font-size:.85rem; color:var(--ink-soft); font-weight:600; } /* Session question-number strip: clickable circles between Previous/Next. Grey = not answered yet · green = right first time · amber = needed hints or a wrong try first · red = still incorrect. */ .ss-qnums { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center; } .ss-qnum { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.82rem; text-decoration:none; line-height:1; transition:transform .12s; } .ss-qnum:hover { transform:translateY(-1px); } .ss-qnum.todo { background:var(--gray, #e5e7eb); color:#6b7280; } .ss-qnum.good { background:#22c55e; color:#fff; } .ss-qnum.help { background:#f59e0b; color:#fff; } .ss-qnum.bad { background:#ef4444; color:#fff; } .ss-qnum.current { box-shadow:0 0 0 3px var(--primary, #6366f1); } @media (max-width:600px) { .ss-qnum { width:26px; height:26px; font-size:.75rem; } /* Narrow screens: the strip gets its own full-width row above the buttons (otherwise the circles stack one-per-line in the squeezed middle column). */ .ss-nav { flex-wrap:wrap; } .ss-nav-pos.ss-qnums { order:-1; flex-basis:100%; margin-bottom:10px; } } /* Question stem: the visual content (shape series, pair brackets, chart, etc.) that the pupil reads BEFORE choosing an answer. Always visible — never gated behind the picture panel. */ .ss-stem { margin:6px 0 8px; padding:14px 16px; background:#f8fafc; border-radius:12px; display:flex; flex-direction:column; align-items:center; gap:8px; } .ss-stem .visual-area, .ss-stem .series-row { width:100%; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; align-items:center; } /* Stem SVGs authored with only a viewBox + max-width (no width/height attrs) collapse to 0px inside the flex .ss-stem when the viewBox is short/wide (Chrome can't resolve an intrinsic size, so the flex item shrinks away). Force the responsive-SVG sizing so the viewBox aspect ratio is honoured. Scoped with :not([width]) so explicitly-sized stem icons are left untouched. */ .ss-stem svg:not([width]) { width:100%; height:auto; } .ss-stem .series-cell { display:flex; flex-direction:column; align-items:center; gap:4px; } .ss-stem .series-arrow { font-size:1.4rem; color:#7c3aed; font-weight:900; display:flex; align-items:center; } @media (max-width:480px){ .ss-stem { padding:10px 8px; } } /* Stem-internal classes lifted from the original per-page