/* ── Theme ──────────────────────────────────────────────────────────── One definition per colour, both themes, via CSS light-dark(). Which branch applies is driven by `color-scheme`, so the in-app picker only has to set color-scheme on — it overrides the OS in BOTH directions for free, and there is no second copy of the palette to drift out of sync. Each custom property is declared twice on purpose: the plain light value first, then the light-dark() version. Browsers without light-dark() (pre-2024) discard the second declaration as invalid and keep the light theme — degraded, never broken. Naming worth knowing: --primary brand fill (button backgrounds) — pair with --on-primary --primary-ink brand colour for TEXT, links and focus rings --border decorative hairlines (cards, dividers) --border-control interactive boundaries (inputs, option buttons); darker on purpose to meet WCAG 1.4.11's 3:1 Every text pair was contrast-checked in both themes; the lowest is 4.8:1 (AA). Don't change a colour without re-checking its partner. */ :root { color-scheme: light dark; --bg: #f7f6f4; --bg: light-dark(#f7f6f4, #131317); --surface: #ffffff; --surface: light-dark(#ffffff, #1c1c23); --surface-2: #faf9f8; --surface-2: light-dark(#faf9f8, #24242c); --primary: #4338ca; --primary: light-dark(#4338ca, #5b57e0); --primary-ink: #4338ca; --primary-ink: light-dark(#4338ca, #a9a6f8); --on-primary: #ffffff; --on-primary: light-dark(#ffffff, #ffffff); --primary-light: #e9e8fb; --primary-light: light-dark(#e9e8fb, #292665); --accent: #047857; --accent: light-dark(#047857, #34d399); --accent-light: #d1fae5; --accent-light: light-dark(#d1fae5, #0a3d2c); --danger: #b91c1c; --danger: light-dark(#b91c1c, #fca5a5); --danger-light: #fee2e2; --danger-light: light-dark(#fee2e2, #4a1c1e); --warn: #92400e; --warn: light-dark(#92400e, #fcd34d); --warn-light: #fef3c7; --warn-light: light-dark(#fef3c7, #43330e); --warn-solid: #f59e0b; --warn-solid: light-dark(#f59e0b, #fbbf24); --text: #1a1a20; --text: light-dark(#1a1a20, #eaeaef); --text-secondary: #55555f; --text-secondary: light-dark(#55555f, #a6a6b2); --border: #e3e1de; --border: light-dark(#e3e1de, #34343f); --border-control: #8e8b85; --border-control: light-dark(#8e8b85, #616170); --radius: 12px; /* A multi-layer shadow can't itself go through light-dark() — it contains commas, which light-dark() would read as its own argument separator. And light-dark() only yields a COLOUR, so it can't supply the numeric channels of an rgb() either. So each shadow layer's finished colour is themed, and the shadows are composed from those. Dark needs far more opacity to register at all; light uses a warm near-black rather than pure black, so it sits against the warm background instead of greying it. */ --shadow-1: rgba(23,20,15,0.04); --shadow-1: light-dark(rgba(23,20,15,0.04), rgba(0,0,0,0.40)); --shadow-2: rgba(23,20,15,0.06); --shadow-2: light-dark(rgba(23,20,15,0.06), rgba(0,0,0,0.45)); --shadow-3: rgba(23,20,15,0.10); --shadow-3: light-dark(rgba(23,20,15,0.10), rgba(0,0,0,0.55)); --shadow: 0 1px 2px var(--shadow-1), 0 4px 12px -2px var(--shadow-2); --shadow-lg: 0 2px 4px var(--shadow-1), 0 12px 28px -6px var(--shadow-3); } /* The picker writes data-theme; forcing color-scheme flips every light-dark() above in one move, and also themes native form controls and scrollbars to match. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; } body { display: flex; flex-direction: column; align-items: center; } .app-container { width: 100%; max-width: 960px; padding: 24px; } header { text-align: center; margin-bottom: 20px; } header h1 { margin: 0; font-size: 1.6rem; color: var(--primary-ink); } header .subtitle { margin: 6px 0 0; color: var(--text-secondary); font-size: 1rem; } /* Tabs */ .tab-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; } /* The reference row: same control, lower visual weight, so the practice modes above it read as the primary choice rather than everything competing equally. */ .tab-bar-secondary { gap: 6px; margin-top: -10px; margin-bottom: 22px; } .tab-bar-secondary .tab-btn { background: none; box-shadow: none; border: 1px solid var(--border); padding: 6px 13px; font-size: 0.86rem; font-weight: 600; } .tab-bar-secondary .tab-btn:hover { background: var(--surface); transform: none; box-shadow: var(--shadow); } .tab-bar-secondary .tab-btn.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } .tab-btn { border: none; background: var(--surface); color: var(--text-secondary); padding: 10px 16px; border-radius: 999px; font-size: 0.95rem; cursor: pointer; box-shadow: var(--shadow); transition: all 0.2s ease; font-weight: 600; } .tab-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); } .tab-btn.active { background: var(--primary); color: var(--on-primary); } /* Panels */ .tab-panel { display: none; animation: fadeIn 0.25s ease; } .tab-panel.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Controls */ .controls { display: flex; gap: 10px; justify-content: center; align-items: center; margin-bottom: 16px; flex-wrap: wrap; } .controls button { border: none; background: var(--primary); color: var(--on-primary); padding: 8px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: transform 0.15s ease; } .controls button:hover { transform: translateY(-1px); } .controls span { font-weight: 700; min-width: 60px; text-align: center; color: var(--text-secondary); } /* Flashcard */ .flip-card { background: transparent; width: 100%; max-width: 720px; height: 320px; margin: 0 auto; perspective: 1000px; cursor: pointer; } .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; border-radius: var(--radius); } .flip-card.flipped .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--radius); box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; padding: 24px; } .flip-card-front { background: var(--surface); border: 1px solid var(--border); } .flip-card-back { background: var(--primary-light); border: 1px solid var(--primary-light); transform: rotateY(180deg); } .card-content { font-size: 1.15rem; line-height: 1.6; max-width: 100%; overflow-wrap: break-word; } .hint { text-align: center; color: var(--text-secondary); font-size: 0.9rem; margin-top: 10px; } /* Exam */ .exam-card { background: var(--surface); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); max-width: 720px; margin: 0 auto; } .exam-question { font-size: 1.15rem; font-weight: 700; margin-bottom: 16px; line-height: 1.5; } .exam-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } /* Topic area picker */ .topic-picker { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; } .topic-picker-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); } /* A second head inside the same picker (e.g. "How many questions?" below the topic chips) needs a gap above it to separate it from the row before. */ .topic-picker-head.secondary { margin-top: 16px; } .topic-all { border: none; background: none; color: var(--primary-ink); font-weight: 700; font-size: 0.82rem; cursor: pointer; text-transform: none; letter-spacing: normal; } .topic-chips { display: flex; flex-wrap: wrap; gap: 8px; } /* Full-width so it forces a new line inside the wrapping flex row above, making the syllabus/additional split visible rather than just implied by which chips happen to have a number. */ .topic-group-label { width: 100%; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); margin: 6px 0 -2px; } .topic-group-label:first-child { margin-top: 0; } .topic-chip { display: inline-flex; align-items: center; gap: 7px; border: 2px solid var(--border); background: var(--bg); border-radius: 999px; padding: 7px 13px; font-size: 0.9rem; cursor: pointer; transition: all 0.15s ease; } .topic-chip:hover { border-color: var(--primary-ink); } .topic-chip.on { border-color: var(--primary-ink); background: var(--primary-light); font-weight: 700; } .topic-num { background: var(--border); border-radius: 999px; padding: 1px 8px; font-size: 0.78rem; font-weight: 700; } .topic-status { margin: 10px 0 0; font-size: 0.85rem; color: var(--text-secondary); } /* Drill */ .drill-styles { margin-top: 8px; } .drill-score { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: 0.9rem; color: var(--text-secondary); } .drill-score strong { color: var(--text); font-size: 1.05rem; } .drill-score em { font-style: normal; color: var(--primary-ink); font-weight: 700; } .drill-reveal { display: none; margin-top: 14px; padding: 14px 16px; border-radius: 10px; background: var(--accent-light); border-left: 4px solid var(--accent); line-height: 1.6; } .drill-reveal.show { display: block; } .drill-reveal strong { display: block; font-size: 1.12rem; color: var(--accent); margin-bottom: 6px; } .drill-reveal span { color: var(--text-secondary); font-size: 0.93rem; } .exam-actions button.ghost { background: none; color: var(--text-secondary); border: 2px solid var(--border); } .exam-actions button.good-btn { background: var(--accent); } .exam-actions button.bad-btn { background: var(--danger); } /* Progress */ .prog-hero { display: flex; align-items: center; gap: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; } .prog-ring { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--border) 0); } .prog-ring span { width: 66px; height: 66px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 1.32rem; font-weight: 800; color: var(--text); } .prog-ring small { font-size: 0.7rem; font-weight: 700; } .prog-hero-text { display: flex; flex-direction: column; gap: 4px; } .prog-hero-text strong { font-size: 1.03rem; } .prog-hero-text span { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.45; } .prog-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 12px; padding: 0 4px; } .prog-legend span { display: inline-flex; align-items: center; gap: 6px; } .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } .sw-mastered { background: var(--accent); } .sw-working { background: var(--warn-solid); } .sw-unseen { background: var(--border); } .prog-row { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px; margin-bottom: 10px; } .prog-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 9px; } .prog-name { font-weight: 700; font-size: 0.95rem; } .prog-count { font-size: 0.86rem; color: var(--text-secondary); white-space: nowrap; } .prog-count strong { font-size: 1.05rem; color: var(--text); } .prog-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--border); } .seg { display: block; height: 100%; transition: width 0.4s ease; } .seg-mastered { background: var(--accent); } .seg-working { background: var(--warn-solid); } .seg-unseen { background: var(--border); } .prog-row-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 9px; font-size: 0.84rem; color: var(--text-secondary); } .prog-practice { border: none; background: var(--primary-light); color: var(--primary-ink); font-weight: 700; font-size: 0.84rem; padding: 7px 13px; border-radius: 8px; cursor: pointer; white-space: nowrap; } .prog-practice:hover { background: var(--primary); color: var(--on-primary); } .prog-sub { margin: 22px 0 10px; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); } .prog-note { font-size: 0.83rem; color: var(--text-secondary); line-height: 1.5; margin: 14px 0 0; } .prog-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .prog-io { display: none; margin: 12px auto 0; max-width: 560px; padding: 10px 14px; border-radius: 8px; font-size: 0.86rem; line-height: 1.5; text-align: center; } .prog-io.show { display: block; } .prog-io.good { background: var(--accent-light); color: var(--accent); } .prog-io.bad { background: var(--danger-light); color: var(--danger); } .prog-actions .ghost { background: none; border: 2px solid var(--border); color: var(--text-secondary); padding: 9px 16px; border-radius: 8px; font-weight: 700; cursor: pointer; } .prog-actions .ghost:hover { border-color: var(--danger); color: var(--danger); } @media (max-width: 420px) { .prog-row-foot { flex-direction: column; align-items: flex-start; gap: 8px; } .prog-practice { width: 100%; } } /* Mock exam */ .mock-meta { font-weight: 600; text-transform: none; letter-spacing: normal; } .mock-review-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; padding: 10px 13px; background: var(--warn-light); border-radius: 8px; font-size: 0.88rem; } .mock-head { margin-bottom: 16px; } .mock-head h2 { margin: 2px 0 8px; font-size: 1.22rem; } .mock-intro { margin: 0 0 12px; line-height: 1.6; color: var(--text-secondary); } .mock-data { overflow-x: auto; margin-bottom: 14px; } .mock-data table, .mock-grid { border-collapse: collapse; width: 100%; font-size: 0.9rem; background: var(--surface); } .mock-data th, .mock-data td, .mock-grid th, .mock-grid td { border: 1px solid var(--border); padding: 7px 10px; text-align: right; } .mock-data th:first-child, .mock-grid th:first-child { text-align: left; font-weight: 600; } .mock-data tr:first-child th, .mock-grid tr:first-child th { background: var(--primary-light); text-align: center; font-weight: 700; } .mock-part { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow); } .mock-part-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .mock-ref { font-weight: 800; color: var(--primary-ink); } .mock-marks { font-size: 0.82rem; color: var(--text-secondary); } .mock-badge { margin-left: auto; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; } .mock-badge.mastered { background: var(--accent-light); color: var(--accent); } .mock-badge.working { background: var(--warn-light); color: var(--warn); } .mock-badge.unseen { background: var(--surface-2); color: var(--text-secondary); } .mock-badge.failed { background: var(--danger-light); color: var(--danger); } .mock-prompt { font-weight: 600; line-height: 1.55; margin: 0 0 8px; } .mock-note, .mock-guidance { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.55; background: var(--bg); border-left: 3px solid var(--border); padding: 8px 12px; margin: 0 0 12px; } .mock-grid { margin-bottom: 12px; } .mock-grid input, .mock-grid select { width: 100%; min-width: 92px; padding: 6px 8px; border: 2px solid var(--border-control); border-radius: 6px; font-size: 0.9rem; text-align: right; font-family: inherit; } .mock-grid select { text-align: left; } .mock-grid input:focus, .mock-grid select:focus { outline: none; border-color: var(--primary-ink); } .mock-grid input.cell-ok, .mock-grid select.cell-ok { border-color: var(--accent); background: var(--accent-light); } .mock-grid input.cell-bad, .mock-grid select.cell-bad { border-color: var(--danger); background: var(--danger-light); } /* Result text under a marked cell. The leading ✓/✗ and the wording are the non-colour cue — never rely on .ok/.bad colour alone to convey the result. */ .cell-answer { display: block; font-size: 0.78rem; font-weight: 700; margin-top: 3px; } .cell-answer.ok { color: var(--accent); } .cell-answer.bad { color: var(--danger); } .given { color: var(--text-secondary); } .mock-answer { width: 100%; padding: 10px 12px; border: 2px solid var(--border-control); border-radius: 8px; font-family: inherit; font-size: 0.94rem; line-height: 1.6; resize: vertical; margin-bottom: 12px; } .mock-answer:focus { outline: none; border-color: var(--primary-ink); } .mock-explain { display: none; margin-top: 14px; } .mock-explain.show { display: block; } .mock-why, .mock-workings { padding: 12px 14px; border-radius: 8px; margin-bottom: 10px; line-height: 1.6; font-size: 0.9rem; } .mock-why { background: var(--primary-light); border-left: 4px solid var(--primary); } .mock-workings { background: var(--bg); border-left: 4px solid var(--accent); } .mock-why strong, .mock-workings strong { display: block; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px; } .mock-why strong { color: var(--primary-ink); } .mock-workings strong { color: var(--accent); } .mock-why ul, .mock-workings ul { margin: 6px 0 0; padding-left: 20px; } .mock-why li, .mock-workings li { margin-bottom: 6px; } .mock-selfmark { margin: 10px 0 0; font-weight: 700; } .mock-tracker { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin-top: 20px; } .mock-tracker > summary { cursor: pointer; font-weight: 700; padding: 4px 0; } .mock-tracker[open] > summary { margin-bottom: 12px; } @media (max-width: 520px) { .mock-data table, .mock-grid { font-size: 0.8rem; } .mock-grid input, .mock-grid select { min-width: 72px; padding: 5px 6px; } } /* Match game */ .match-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; } .match-tile { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 96px; padding: 10px 11px; font-size: 0.88rem; line-height: 1.35; background: var(--surface); border: 2px solid var(--border); border-radius: 10px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, opacity 0.3s ease; } .match-tile.long { font-size: 0.78rem; } .match-tile.xlong { font-size: 0.68rem; line-height: 1.3; padding: 8px 9px; } .match-tile:hover:not(.done) { border-color: var(--primary-ink); } .match-tile.sel { border-color: var(--primary-ink); background: var(--primary-light); font-weight: 700; } .match-tile.wrong { border-color: var(--danger); background: var(--danger-light); } .match-tile.done { opacity: 0.12; border-style: dashed; cursor: default; } @media (max-width: 420px) { .match-grid { grid-template-columns: repeat(2, 1fr); } .match-tile { min-height: 88px; font-size: 0.8rem; } .match-tile.long { font-size: 0.72rem; } .match-tile.xlong { font-size: 0.62rem; } } .exam-topic { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary-ink); margin-bottom: 8px; } /* Sits apart from the topic label on purpose — plain appended text next to an already-bold uppercase label was too easy to skim past, and missing this instruction means selecting only one option on a question that needs several. */ .multi-badge { display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: var(--warn-light); color: var(--warn); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; } .option-wrap { display: flex; flex-direction: column; } .option-btn { display: block; width: 100%; text-align: left; background: var(--bg); border: 2px solid var(--border-control); border-radius: 10px; padding: 12px 14px; cursor: pointer; font-size: 1rem; transition: all 0.2s ease; } .option-btn:hover { border-color: var(--primary-ink); background: var(--primary-light); } .option-btn.selected { border-color: var(--primary-ink); background: var(--primary-light); } /* As with .cell-answer, the glyph is the non-colour cue. The feedback line below the options already states the result in words, so these are a scanning aid rather than the only signal — but they must not be colour-only either. option-btn is a real button, so ::after works here. */ .option-btn.correct { border-color: var(--accent); background: var(--accent-light); } .option-btn.wrong { border-color: var(--danger); background: var(--danger-light); } .option-btn.correct::after, .option-btn.wrong::after { float: right; margin-left: 10px; font-weight: 800; } .option-btn.correct::after { content: "✓"; color: var(--accent); } .option-btn.wrong::after { content: "✗"; color: var(--danger); } .option-btn.dimmed { opacity: 0.5; } .option-btn.locked { pointer-events: none; } /* Per-option explanation, revealed once the question is answered */ .option-why { display: none; font-size: 0.92rem; line-height: 1.55; padding: 9px 14px 3px 16px; margin: 4px 0 2px 6px; border-left: 3px solid var(--border); color: var(--text-secondary); } .option-why.show { display: block; } .option-why.why-correct { border-left-color: var(--accent); color: var(--accent); font-weight: 600; } .option-why.why-wrong { border-left-color: var(--danger); color: var(--danger); } .exam-actions { display: flex; gap: 10px; justify-content: center; } .exam-actions button { border: none; background: var(--accent); color: var(--on-primary); padding: 10px 18px; border-radius: 8px; cursor: pointer; font-weight: 700; } .exam-feedback { margin-top: 14px; padding: 12px; border-radius: 8px; font-weight: 600; text-align: center; display: none; } .exam-feedback.show { display: block; } .exam-feedback.good { background: var(--accent-light); color: var(--accent); } .exam-feedback.bad { background: var(--danger-light); color: var(--danger); } .exam-feedback.warn { background: var(--warn-light); color: var(--warn); } .exam-actions button:disabled { opacity: 0.45; cursor: default; } /* Takeaway shown under the explanations */ .exam-key { display: none; margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: var(--warn-light); border-left: 4px solid var(--warn); line-height: 1.55; } .exam-key.show { display: block; } .exam-key strong { display: block; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warn); margin-bottom: 4px; } .exam-key span { color: var(--warn); } /* Acronyms */ .search-box { display: flex; justify-content: center; margin-bottom: 16px; } .search-box input { width: 100%; max-width: 480px; padding: 10px 14px; border-radius: 999px; border: 2px solid var(--border-control); font-size: 1rem; outline: none; transition: border-color 0.2s ease; } .search-box input:focus { border-color: var(--primary-ink); } .acronyms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .acronym-card { background: var(--surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); border-left: 5px solid var(--primary); } .acronym-card h3 { margin: 0; font-size: 1.1rem; color: var(--primary-ink); } .acronym-card .phrase { margin-top: 6px; font-weight: 600; } .acronym-card .notes { margin-top: 8px; font-size: 0.95rem; color: var(--text-secondary); line-height: 1.45; } /* Mind Map */ .mindmap-container { background: var(--surface); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); overflow-x: auto; } .tree, .tree ul { list-style: none; margin: 0; padding-left: 24px; } .tree > li { padding-left: 0; } .tree li { position: relative; padding: 6px 0; } .tree li::before, .tree li::after { content: ""; position: absolute; left: -18px; } .tree li::before { border-top: 2px solid var(--border); top: 18px; width: 14px; height: 0; } .tree li::after { border-left: 2px solid var(--border); height: 100%; top: 0; width: 0; } .tree li:last-child::after { height: 18px; } .tree > li::after { display: none; } .tree > li::before { display: none; } .tree-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; color: var(--primary-ink); padding: 6px 10px; border-radius: 8px; background: var(--primary-light); user-select: none; } .tree-toggle:hover { background: var(--primary-light); } .tree-toggle .chevron { display: inline-block; width: 18px; height: 18px; text-align: center; line-height: 18px; transition: transform 0.2s ease; } .tree-toggle.collapsed .chevron { transform: rotate(-90deg); } .tree-node-text { display: inline-block; padding: 6px 10px; background: var(--bg); border-radius: 8px; border: 1px solid var(--border); } .tree-branches { overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; } .tree-branches.collapsed { max-height: 0; opacity: 0; } .tree-branches.expanded { max-height: 2000px; opacity: 1; } /* Tips */ .tips-list { display: flex; flex-direction: column; gap: 12px; } .tip-card { background: var(--surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); } .tip-card summary { font-weight: 700; font-size: 1.05rem; cursor: pointer; color: var(--primary-ink); list-style: none; } .tip-card summary::marker { display: none; } .tip-card details > div { margin-top: 10px; line-height: 1.6; color: var(--text-secondary); } /* Formulas */ .formulas-list { display: flex; flex-direction: column; gap: 12px; } .formula-card { background: var(--surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); border-left: 5px solid var(--accent); } .formula-card h4 { margin: 0; font-size: 1rem; color: var(--text); } .formula-card .formula { margin-top: 8px; font-family: "Courier New", Courier, monospace; background: var(--bg); padding: 10px 12px; border-radius: 8px; font-size: 0.95rem; color: var(--primary-ink); font-weight: 700; } .formula-card .formula-note { margin-top: 8px; font-size: 0.9rem; color: var(--text-secondary); } /* Footer */ footer { text-align: center; margin-top: 24px; color: var(--text-secondary); font-size: 0.85rem; } /* Responsive */ @media (max-width: 640px) { .app-container { padding: 14px; } header h1 { font-size: 1.25rem; } .flip-card { height: 280px; } .card-content { font-size: 1rem; } .tab-btn { padding: 8px 12px; font-size: 0.85rem; } } /* ============ Platform portal ============ */ .portal { max-width: 760px; margin: 0 auto; padding: 24px 16px; } .portal-head { text-align: center; margin-bottom: 24px; } .portal-head h1 { color: var(--primary-ink); margin: 0 0 4px; } .portal-head .subtitle { color: var(--text-secondary); } /* Landing pitch, shown only to signed-out visitors above the sign-in card */ .pitch { margin-bottom: 22px; } .pitch-lead { font-size: 1.05rem; line-height: 1.6; color: var(--text); margin: 0 0 18px; } .pitch-lead strong { color: var(--primary-ink); } .pitch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 16px; } .pitch-point { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .pitch-point h3 { margin: 0 0 6px; font-size: 0.95rem; color: var(--primary-ink); } .pitch-point p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--text-secondary); } .pitch-foot { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5; margin: 0; } @media (max-width: 560px) { .pitch-grid { grid-template-columns: 1fr; } } .auth-card, .catalogue-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); margin-bottom: 16px; } .auth-card h2 { margin: 0 0 6px; font-size: 1.1rem; } .auth-card p { color: var(--text-secondary); margin: 0 0 14px; line-height: 1.5; } .auth-row { display: flex; gap: 8px; flex-wrap: wrap; } .auth-row input { flex: 1; min-width: 200px; padding: 11px 13px; border: 2px solid var(--border-control); border-radius: 8px; font-size: 1rem; font-family: inherit; } .auth-row input:focus { outline: none; border-color: var(--primary-ink); } .btn { border: none; background: var(--primary); color: var(--on-primary); font-weight: 700; padding: 11px 18px; border-radius: 8px; cursor: pointer; font-size: 0.95rem; } .btn:hover { filter: brightness(1.06); } .btn.secondary { background: none; border: 2px solid var(--border); color: var(--text-secondary); } .btn.success { background: var(--accent); } .btn:disabled { opacity: 0.5; cursor: default; } .catalogue-card { display: flex; align-items: center; gap: 16px; } .catalogue-card .cat-body { flex: 1; } .catalogue-card h3 { margin: 0 0 4px; } .catalogue-card p { margin: 0; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.45; } .owned-badge { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: var(--accent-light); padding: 3px 9px; border-radius: 999px; } .portal-note { margin: 10px auto 0; max-width: 560px; padding: 11px 14px; border-radius: 8px; font-size: 0.9rem; line-height: 1.5; text-align: center; display: none; } .portal-note.show { display: block; } .portal-note.good { background: var(--accent-light); color: var(--accent); } .portal-note.info { background: var(--primary-light); color: var(--primary-ink); } .portal-note.bad { background: var(--danger-light); color: var(--danger); } .portal-topbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 760px; margin: 0 auto 8px; padding: 0 16px; font-size: 0.88rem; color: var(--text-secondary); } /* The email is the least useful thing here — it truncates first rather than pushing the theme picker onto its own line. */ .portal-topbar #whoami { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 480px) { .portal-topbar { font-size: 0.8rem; padding: 0 10px; } /* On a phone the signed-in email is the least useful thing above the fold, and it wraps onto a line of its own. The dashboard shows it anyway. */ .portal-topbar #whoami { display: none; } } .link-btn { background: none; border: none; color: var(--primary-ink); cursor: pointer; font-weight: 700; font-size: 0.88rem; } .dev-link { word-break: break-all; font-size: 0.8rem; } /* API loading / empty states reused by the app */ .loading { text-align: center; color: var(--text-secondary); padding: 30px; } /* Legal pages (terms, privacy, refunds, GDPR) — long-form prose */ .legal-page { max-width: 760px; margin: 0 auto; padding: 24px 20px 60px; } .legal-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 28px; font-size: 0.88rem; } .legal-nav a { color: var(--primary-ink); text-decoration: none; font-weight: 600; } .legal-nav a:hover { text-decoration: underline; } .legal-nav span { color: var(--border); } .legal-page h1 { font-size: 1.6rem; margin-bottom: 4px; } .legal-page .legal-updated { color: var(--text-secondary); font-size: 0.88rem; margin-bottom: 32px; } .legal-page h2 { font-size: 1.15rem; margin-top: 36px; margin-bottom: 10px; color: var(--primary-ink); } .legal-page h3 { font-size: 1rem; margin-top: 22px; margin-bottom: 6px; } .legal-page p, .legal-page li { line-height: 1.65; color: var(--text); font-size: 0.95rem; } .legal-page ul, .legal-page ol { padding-left: 22px; } .legal-page li { margin-bottom: 6px; } .legal-page a { color: var(--primary-ink); } .legal-fill { background: var(--warn-light); color: var(--warn); padding: 1px 6px; border-radius: 4px; font-weight: 700; font-size: 0.85em; } .legal-note { background: var(--primary-light); border-left: 4px solid var(--primary); padding: 12px 16px; border-radius: 8px; margin: 18px 0; font-size: 0.9rem; } /* A centred stack, not one wrapping row. The theme picker is a tall pill, so sitting it inline with text links made them wrap around it and lose their baseline on narrow screens. Stacking is stable at every width and needs no breakpoint. */ .site-footer { width: 100%; max-width: 760px; margin: 40px auto 20px; padding: 16px 20px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 0.85rem; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; } .site-footer a { color: var(--text-secondary); text-decoration: none; } .site-footer a:hover { color: var(--primary-ink); text-decoration: underline; } .footer-copy { color: var(--text-secondary); text-align: center; } /* Theme picker — a 3-way segmented control (Light / Auto / Dark). "Auto" means "follow the OS", and is the default. */ .theme-picker { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; } .theme-opt { display: inline-flex; align-items: center; gap: 5px; border: none; background: none; color: var(--text-secondary); font: inherit; font-size: 0.8rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .theme-opt:hover { color: var(--text); } .theme-opt.on { background: var(--surface); color: var(--primary-ink); box-shadow: var(--shadow); } .theme-opt:focus-visible { outline: 2px solid var(--primary-ink); outline-offset: 1px; } .theme-picker-row { display: flex; justify-content: center; margin-bottom: 18px; } @media (max-width: 420px) { .theme-opt { padding: 5px 9px; font-size: 0.75rem; } } /* Streak + Progress link, side by side: both are "how am I doing" status, not practice activities, so they sit together above the tab bar rather than the latter being a tab itself. */ .status-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 14px; } /* Study streak — header strip. Sized to be noticed on arrival without competing with the tabs below it. */ .streak-bar { display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: 4px 9px; padding: 8px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow); } .streak-flame { font-size: 1rem; line-height: 1; } .streak-main { font-weight: 800; font-size: 0.95rem; color: var(--text); } .streak-sub { font-size: 0.85rem; color: var(--text-secondary); } /* Deliberately not a .tab-btn: it opens a dashboard panel, not a practice mode, so it's styled as its own outlined pill rather than joining the chip row it used to sit in. */ .progress-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--surface); border: 1px solid var(--primary-ink); color: var(--primary-ink); font-weight: 700; font-size: 0.9rem; border-radius: 999px; cursor: pointer; box-shadow: var(--shadow); } .progress-link:hover { background: var(--primary-light); } .progress-link.active { background: var(--primary-ink); color: var(--on-primary); } @media (max-width: 480px) { .streak-bar, .progress-link { border-radius: 14px; padding: 9px 14px; } .status-row { flex-direction: column; align-items: stretch; } .progress-link { justify-content: center; } } /* Theme picker at the foot of a legal page — these pages have no site footer of their own, and without this a stored choice could be applied here but never changed here. */ .legal-theme { display: flex; justify-content: center; margin: 36px 0 8px; }