/* Math Magician — lesson figures drawn by figs.js.
   Colours are written for the dark theme; the site's light theme
   (assets/theme.js) derives the light colours from these rules. */
.mf-fig { margin: 16px 0; text-align: center; }
.mf { max-width: 100%; height: auto; overflow: visible; }
.mf-cap { font-size: 13px; color: rgba(226,232,240,0.55); margin-top: 4px; }
.mf line, .mf path, .mf polyline, .mf polygon, .mf circle, .mf ellipse, .mf rect { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mf .mf-ln { stroke: rgba(226,232,240,0.85); stroke-width: 1.7; }
.mf .mf-ac { stroke: #a5b4fc; stroke-width: 2; }
.mf .mf-gn { stroke: #9ed43c; stroke-width: 2; }
.mf .mf-hl { stroke: #f472b6; stroke-width: 1.8; }
.mf .mf-or { stroke: #fbbf24; stroke-width: 2; }
.mf .mf-mu { stroke: rgba(226,232,240,0.42); stroke-width: 1.3; }
.mf .mf-dash { stroke-dasharray: 5 4; }
.mf .mf-curve { stroke-width: 2.2; }
.mf .mf-grid { stroke: rgba(226,232,240,0.09); stroke-width: 1; }
.mf .mf-axis { stroke: rgba(226,232,240,0.55); stroke-width: 1.3; }
.mf .mf-arrowhead { fill: rgba(226,232,240,0.55); stroke: none; }
.mf .mf-arrowhead-ac { fill: #9ed43c; stroke: none; }
.mf .mf-fl { fill: rgba(99,102,241,0.16); stroke: none; }
.mf .mf-fl.mf-ln { stroke: rgba(226,232,240,0.85); }
.mf .mf-fl2 { fill: rgba(158,212,60,0.16); stroke: none; }
.mf .mf-fl3 { fill: rgba(244,114,182,0.16); stroke: none; }
.mf .mf-bar { fill: rgba(99,102,241,0.35); stroke: #a5b4fc; stroke-width: 1.2; }
.mf .mf-bar2 { fill: rgba(244,114,182,0.35); stroke: #f472b6; stroke-width: 1.2; }
.mf .mf-band { stroke: #9ed43c; stroke-width: 4; }
.mf .mf-open { fill: #0d1016; stroke: #9ed43c; stroke-width: 2; }
.mf .mf-closed { fill: #9ed43c; stroke: #9ed43c; stroke-width: 2; }
.mf .mf-dot { fill: rgba(226,232,240,0.9); stroke: none; }
.mf text { stroke: none; }
.mf .mf-tx { fill: rgba(226,232,240,0.85); font: 13px "JetBrains Mono", ui-monospace, monospace; }
.mf .mf-sm { font-size: 11px; fill: rgba(226,232,240,0.6); }
.mf .mf-pt { font: italic 600 14px "DM Sans", system-ui, sans-serif; fill: #f2f5f9; }
.mf .mf-it { font-style: italic; }
.mf .mf-tx-len { fill: #fbbf24; font-size: 12px; }
.mf .mf-tx-ac { fill: #a5b4fc; }
.mf .mf-tx-gn { fill: #9ed43c; }
.mf .mf-tx-hl { fill: #f472b6; }
.mf .mf-tx-or { fill: #fbbf24; }
.mf .mf-tx-mu { fill: rgba(226,232,240,0.5); }

/* Older lesson diagrams colour their lines with SVG attributes, which the
   light theme cannot recolour: show them as their negative on a light page. */
html[data-theme="light"] .lesson-body svg:not(.mf):not([data-ml-no-theme]) { filter: invert(0.88) hue-rotate(180deg); }

/* Content beyond the CAPS Annual Teaching Plan */
.ext-box { background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.30); border-radius: 12px; padding: 12px 16px; margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: rgba(226,232,240,0.85); }
.ext-box strong { color: #fbbf24; }
.mf .mf-pie1 { fill: rgba(99,102,241,0.55); stroke: #0d1016; stroke-width: 1.5; }
.mf .mf-pie2 { fill: rgba(158,212,60,0.55); stroke: #0d1016; stroke-width: 1.5; }
.mf .mf-pie3 { fill: rgba(244,114,182,0.55); stroke: #0d1016; stroke-width: 1.5; }
.mf .mf-pie4 { fill: rgba(251,191,36,0.55); stroke: #0d1016; stroke-width: 1.5; }
.mf .mf-pie5 { fill: rgba(56,189,248,0.55); stroke: #0d1016; stroke-width: 1.5; }
.mf .mf-tx-pie { fill: #f2f5f9; }
.mf .mf-bar3 { fill: rgba(158,212,60,0.35); stroke: #9ed43c; stroke-width: 1.2; }

/* several small figures side by side */
.mf-row { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin: 16px 0; }
.mf-row .mf-fig { margin: 0; max-width: 220px; }
.mf-row .mf-cap { font-size: 12.5px; line-height: 1.4; }

/* Practice help: CAPS cognitive level, hint and worked solution */
.mm-level { display: inline-block; font: 600 11px "DM Sans", system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid; }
.mm-level-K { color: #7dd3fc; border-color: rgba(125,211,252,0.40); background: rgba(125,211,252,0.08); }
.mm-level-R { color: #a5b4fc; border-color: rgba(165,180,252,0.40); background: rgba(165,180,252,0.08); }
.mm-level-C { color: #fbbf24; border-color: rgba(251,191,36,0.40); background: rgba(251,191,36,0.08); }
.mm-level-P { color: #f472b6; border-color: rgba(244,114,182,0.40); background: rgba(244,114,182,0.08); }
.mm-hint-btn { margin: 0 0 14px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(251,191,36,0.35); background: rgba(251,191,36,0.08); color: #fbbf24; font: 600 13px "DM Sans", system-ui, sans-serif; cursor: pointer; }
.mm-hint-btn:hover { background: rgba(251,191,36,0.16); }
.mm-hint-btn:focus-visible { outline: 2px solid #fbbf24; outline-offset: 2px; }
.mm-hint { margin: 0 0 14px; max-width: 600px; padding: 10px 14px; border-left: 3px solid #fbbf24; background: rgba(251,191,36,0.07); border-radius: 0 10px 10px 0; color: rgba(226,232,240,0.88); font-size: 14px; line-height: 1.6; }
.mm-sol-title { margin-top: 10px; font: 700 12px "Cabinet Grotesk", sans-serif; text-transform: uppercase; letter-spacing: 0.07em; color: #a5b4fc; }
.mm-steps { margin: 6px 0 0; padding-left: 22px; color: rgba(226,232,240,0.88); }
.mm-steps li { margin: 3px 0; }
.mm-sol { margin-top: 8px; color: rgba(226,232,240,0.85); }
.mm-sol summary { cursor: pointer; color: #a5b4fc; font-weight: 600; }

/* ── Mixed exam practice (exam-practice.js) ── */
.mx-open { flex-shrink: 0; display: flex; align-items: center; gap: 9px; margin: 10px 12px 6px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(158,212,60,0.32); background: rgba(158,212,60,0.07); color: #c3e56f; font: 700 12.5px "Cabinet Grotesk", sans-serif; letter-spacing: 0.02em; text-align: left; cursor: pointer; transition: background 120ms, border-color 120ms; }
.mx-open:hover { background: rgba(158,212,60,0.14); }
.mx-open.on { background: rgba(158,212,60,0.20); border-color: rgba(158,212,60,0.60); }
.mx-open:focus-visible, .mx-chip:focus-visible, .mx-len:focus-visible, .mx-link:focus-visible, .mx-topic:focus-visible { outline: 2px solid #9ed43c; outline-offset: 2px; }
.mx-open-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(158,212,60,0.18); font-size: 13px; }
.mx-intro { max-width: 620px; margin: 6px 0 16px; color: rgba(226,232,240,0.70); font-size: 14px; line-height: 1.6; }
.mx-mix { display: flex; gap: 3px; max-width: 620px; min-height: 28px; margin: 0 0 22px; border-radius: 8px; overflow: hidden; }
.mx-mix-seg { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 4px 5px; font: 600 10.5px/1.15 "DM Sans", system-ui, sans-serif; color: #0b0d10; text-align: center; }
/* Fill and dark label in one rule, so the light theme keeps both. */
.mx-seg-K { background-color: #7dd3fc; color: #0b0d10; }
.mx-seg-R { background-color: #8b9cf8; color: #0b0d10; }
.mx-seg-C { background-color: #fbbf24; color: #0b0d10; }
.mx-seg-P { background-color: #f472b6; color: #0b0d10; }
.mx-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; max-width: 620px; margin: 0 0 8px; }
.mx-label { display: block; margin: 18px 0 8px; font: 700 11px "Cabinet Grotesk", sans-serif; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(226,232,240,0.55); }
.mx-row-head .mx-label { margin: 0; }
.mx-links { display: flex; gap: 12px; }
.mx-link { padding: 0; border: 0; background: none; color: #c3e56f; font: 600 12.5px "DM Sans", system-ui, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mx-chips { display: flex; flex-wrap: wrap; gap: 6px; max-width: 760px; margin-bottom: 22px; }
.mx-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 6px; border-radius: 999px; border: 1px solid rgba(226,232,240,0.14); background: transparent; color: rgba(226,232,240,0.55); font: 500 12.5px "DM Sans", system-ui, sans-serif; cursor: pointer; transition: background 110ms, border-color 110ms, color 110ms; }
.mx-chip.on { border-color: rgba(158,212,60,0.50); background: rgba(158,212,60,0.10); color: #e3e8ef; }
.mx-chip-num { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px; background: rgba(226,232,240,0.10); font: 700 11px "JetBrains Mono", monospace; }
.mx-chip.on .mx-chip-num { background: rgba(158,212,60,0.28); color: #c3e56f; }
.mx-lengths { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.mx-len { padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(226,232,240,0.14); background: transparent; color: rgba(226,232,240,0.65); font: 600 13px "DM Sans", system-ui, sans-serif; cursor: pointer; }
.mx-len.on { border-color: rgba(158,212,60,0.55); background: rgba(158,212,60,0.12); color: #c3e56f; }
.mx-warn { margin: -8px 0 14px; color: #fca5a5; font-size: 13px; }
.mx-results { margin-bottom: 8px; }
.mx-score { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.mx-score-big { font: 700 44px/1 "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; color: #c3e56f; }
.mx-score-text { font-size: 15px; color: rgba(226,232,240,0.75); }
.mx-score-text strong { color: #e3e8ef; }
.mx-bars { display: grid; gap: 8px; max-width: 560px; }
.mx-bar-row { display: grid; grid-template-columns: 150px 1fr 44px; align-items: center; gap: 10px; }
.mx-bar-row .mm-level { justify-self: start; }
.mx-bar { height: 10px; border-radius: 999px; background: rgba(226,232,240,0.08); overflow: hidden; }
.mx-bar-fill { display: block; height: 100%; border-radius: 999px; }
.mx-bar-num { font: 600 12.5px "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; color: rgba(226,232,240,0.75); text-align: right; }
.mx-note { max-width: 560px; margin: 12px 0 0; font-size: 12.5px; color: rgba(226,232,240,0.50); }
.mx-review { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mx-topic { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 10px; border: 1px solid rgba(226,232,240,0.12); background: rgba(226,232,240,0.03); color: #e3e8ef; font: 500 13px "DM Sans", system-ui, sans-serif; text-align: left; cursor: pointer; }
.mx-topic:hover { border-color: rgba(158,212,60,0.45); }
.mx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 26px; }
.mx-actions .lesson-next-btn { margin: 0; }
@media (max-width: 520px) {
  .mx-bar-row { grid-template-columns: 1fr 44px; }
  .mx-bar-row .mx-bar { grid-column: 1 / -1; grid-row: 2; }
  .mx-mix-seg { font-size: 9px; }
}

/* ── Lesson activities (lesson-explore.js) ── */
.ex-card { max-width: 760px; margin: 4px 0 26px; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(158,212,60,0.26); background: rgba(158,212,60,0.05); }
.ex-explore { margin: 6px 0 26px; border-color: rgba(125,211,252,0.28); background: rgba(125,211,252,0.05); }
.ex-head { display: flex; gap: 12px; align-items: flex-start; }
.ex-badge { flex-shrink: 0; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(158,212,60,0.20); color: #c3e56f; font: 700 15px "Cabinet Grotesk", sans-serif; }
.ex-explore .ex-badge { background: rgba(125,211,252,0.18); color: #7dd3fc; }
.ex-title { font: 800 13px "Cabinet Grotesk", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #c3e56f; }
.ex-explore .ex-title { color: #7dd3fc; }
.ex-sub { margin-top: 3px; font-size: 14px; line-height: 1.55; color: rgba(226,232,240,0.70); }
.ex-q { margin: 14px 0 12px; font-size: 16px; font-weight: 600; line-height: 1.5; color: #e3e8ef; }
.ex-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-opt { padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(226,232,240,0.16); background: rgba(226,232,240,0.03); color: #e3e8ef; font: 500 14px "DM Sans", system-ui, sans-serif; cursor: pointer; text-align: left; }
.ex-opt:hover:not(:disabled) { border-color: rgba(158,212,60,0.50); }
.ex-opt:disabled { cursor: default; opacity: 0.75; }
.ex-opt.ok { opacity: 1; border-color: rgba(16,185,129,0.65); background: rgba(16,185,129,0.12); }
.ex-opt.no { opacity: 1; border-color: rgba(239,68,68,0.55); background: rgba(239,68,68,0.10); }
.ex-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-in { flex: 0 1 240px; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(226,232,240,0.18); background: rgba(0,0,0,0.25); color: #e3e8ef; font: 500 15px "JetBrains Mono", monospace; }
.ex-in.ok { border-color: rgba(16,185,129,0.65); }
.ex-in.no { border-color: rgba(239,68,68,0.55); }
.ex-go { padding: 9px 16px; border-radius: 10px; border: 0; background: #9ed43c; color: #0b0d10; font: 700 13px "Cabinet Grotesk", sans-serif; cursor: pointer; }
.ex-go:disabled { opacity: 0.5; cursor: default; }
.ex-fb { margin-top: 12px; font-size: 14px; line-height: 1.6; color: rgba(226,232,240,0.85); }
.ex-fb.ok { color: #6ee7b7; }
.ex-fb strong { color: #e3e8ef; }
.ex-link { display: inline-block; margin: 12px 0 0 40px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(125,211,252,0.45); color: #7dd3fc; font: 600 13px "DM Sans", system-ui, sans-serif; text-decoration: none; }
.ex-link:hover { background: rgba(125,211,252,0.10); }
.ex-opt:focus-visible, .ex-go:focus-visible, .ex-in:focus-visible, .ex-link:focus-visible { outline: 2px solid #9ed43c; outline-offset: 2px; }

/* ── Weak spots (practice-results.js) ── */
.mm-weak { flex-shrink: 0; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background-color: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,0.18); }
.mm-retry h2 { color: #fbbf24; }
.mm-retry-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; }
.mm-retry-actions .lesson-next-btn { margin: 0; }
.mx-len:disabled { opacity: 0.45; cursor: not-allowed; }
.mx-mode-note { margin: -10px 0 18px; }
.mx-record { max-width: 620px; margin-top: 28px; padding-top: 6px; border-top: 1px solid rgba(226,232,240,0.10); }
@media (max-width: 700px) {
  .mx-open { margin: 8px 12px 4px; padding: 6px 10px; font-size: 12px; }
  .mx-open-icon { width: 18px; height: 18px; font-size: 11px; }
  .ex-link { margin-left: 0; }
}

/* ── Phone navigation (mobile-nav.js) ── */
#mmStick { display: contents; }
#mmNavRow, #mmNavClose, #mmNavBackdrop { display: none; }
@media (max-width: 700px) {
  /* body must not be a scroll container, or the sticky bar cannot stick to the viewport */
  html body { overflow: visible; }
  #mmStick { display: block; position: sticky; top: 0; z-index: 40; background-color: #08090b; box-shadow: 0 6px 14px rgba(0,0,0,0.35); }
  #mmNavRow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.07); }
  #mmNavBtn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; border: 1px solid rgba(158,212,60,0.40); background-color: rgba(158,212,60,0.10); color: #c3e56f; font: 700 13px "Cabinet Grotesk", sans-serif; cursor: pointer; }
  .mm-nav-burger, .mm-nav-burger::before, .mm-nav-burger::after { display: block; width: 14px; height: 2px; border-radius: 2px; background-color: #c3e56f; }
  .mm-nav-burger { position: relative; }
  .mm-nav-burger::before, .mm-nav-burger::after { content: ''; position: absolute; left: 0; }
  .mm-nav-burger::before { top: -5px; }
  .mm-nav-burger::after { top: 5px; }
  #mmNavTopic { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px "Cabinet Grotesk", sans-serif; color: rgba(226,232,240,0.80); }
  #tabBar { overflow-x: auto; scrollbar-width: none; }
  #tabBar::-webkit-scrollbar { display: none; }
  .tab-btn { flex-shrink: 0; }

  html body #sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 70;
    width: min(86vw, 340px); max-height: none; border-right: 1px solid rgba(255,255,255,0.10); border-bottom: none;
    background-color: #0b0d10; transform: translateX(-102%); visibility: hidden;
    transition: transform 220ms ease, visibility 0s linear 220ms;
  }
  body.mm-nav-open #sidebar { transform: none; visibility: visible; transition: transform 220ms ease, visibility 0s; box-shadow: 12px 0 32px rgba(0,0,0,0.45); }
  #sidebarHeader { position: relative; padding-right: 52px; }
  #mmNavClose { display: grid; place-items: center; position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(226,232,240,0.16); background-color: transparent; color: #e3e8ef; font-size: 16px; cursor: pointer; }
  #mmNavBackdrop { display: block; position: fixed; inset: 0; z-index: 65; background-color: rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
  body.mm-nav-open #mmNavBackdrop { opacity: 1; pointer-events: auto; }
  html.mm-nav-lock { overflow: hidden; }
  #mmNavBtn:focus-visible, #mmNavClose:focus-visible { outline: 2px solid #9ed43c; outline-offset: 2px; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  html body #sidebar, #mmNavBackdrop { transition: none; }
}

/* ── Geometry proofs (proof-practice.js) ── */
.mm-proof { max-width: 640px; margin-bottom: 8px; }
.pf-how { margin: 0 0 14px; color: rgba(226,232,240,0.62); font-size: 13px; line-height: 1.55; }
.pf-label { margin: 0 0 8px; color: rgba(226,232,240,0.50); font: 700 11px "DM Sans", system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.pf-lines { list-style: none; counter-reset: pf; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-line { counter-increment: pf; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); }
.pf-line::before { content: counter(pf); grid-row: 1; align-self: center; color: rgba(226,232,240,0.45); font: 700 12px "JetBrains Mono", monospace; text-align: right; }
.pf-stmt { color: #e3e8ef; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.pf-row { display: flex; align-items: center; gap: 6px; }
.pf-reason { max-width: 230px; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.14); background: #1b222c; color: #e3e8ef; font: 13px "DM Sans", system-ui, sans-serif; cursor: pointer; }
.pf-reason:focus-visible, .pf-card:focus-visible, .pf-del:focus-visible { outline: 2px solid #9ed43c; outline-offset: 2px; }
.pf-reason:disabled { cursor: default; opacity: 1; }
.pf-del { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); background: none; color: rgba(226,232,240,0.55); font-size: 12px; cursor: pointer; }
.pf-del:hover { border-color: rgba(239,68,68,0.45); color: #fca5a5; }
.pf-note { grid-column: 2 / -1; color: #fca5a5; font-size: 12.5px; }
.pf-line.ok { border-color: rgba(16,185,129,0.55); background: rgba(16,185,129,0.09); }
.pf-line.no { border-color: rgba(239,68,68,0.50); background: rgba(239,68,68,0.08); }
.pf-empty { padding: 14px; border: 1px dashed rgba(255,255,255,0.16); border-radius: 10px; color: rgba(226,232,240,0.50); font-size: 13px; text-align: center; }
.pf-pool { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pf-card { padding: 8px 12px; border-radius: 10px; border: 1px dashed rgba(158,212,60,0.40); background: rgba(158,212,60,0.06); color: #e3e8ef; font: 14px "DM Sans", system-ui, sans-serif; line-height: 1.4; text-align: left; cursor: pointer; transition: background 140ms, border-color 140ms; }
.pf-card:hover { border-style: solid; background: rgba(158,212,60,0.14); }
.pf-allin { color: rgba(226,232,240,0.50); font-size: 13px; }
.pf-missing { margin-top: 10px; padding: 10px 14px; border-left: 3px solid #fbbf24; border-radius: 0 10px 10px 0; background: rgba(251,191,36,0.07); color: rgba(226,232,240,0.85); font-size: 13.5px; }
.pf-missing ul { margin: 6px 0 0; padding-left: 20px; }
@media (max-width: 700px) {
  .pf-line { grid-template-columns: 22px minmax(0, 1fr); }
  .pf-row { grid-column: 2; }
  .pf-reason { flex: 1; max-width: none; }
  .pf-card { flex: 1 1 100%; }
}

/* ── My progress (exam-practice.js) ── */
.mp-save { margin-top: -6px; }
.mp-save.on { color: #6ee7b7; }
.mp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 560px; margin: 18px 0 4px; border: 1px solid rgba(226,232,240,0.10); border-radius: 12px; overflow: hidden; }
.mp-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; }
.mp-stat + .mp-stat { border-left: 1px solid rgba(226,232,240,0.10); }
.mp-v { font: 800 26px "Cabinet Grotesk", sans-serif; letter-spacing: -0.02em; color: #e3e8ef; font-variant-numeric: tabular-nums; }
.mp-v small { margin-left: 2px; font-size: 15px; font-weight: 600; color: rgba(226,232,240,0.50); }
.mp-v.good { color: #6ee7b7; }
.mp-v.warn { color: #fbbf24; }
.mp-v.crit { color: #f87171; }
.mp-l { font: 700 10.5px "Cabinet Grotesk", sans-serif; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(226,232,240,0.50); }
.mp-actions { margin-top: 16px; }
.mp-chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; max-width: 760px; }
.mp-ch { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "num name" "p p" "done done"; align-items: center; gap: 2px 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(226,232,240,0.10); border-left: 3px solid rgba(226,232,240,0.18); background: rgba(226,232,240,0.03); }
.mp-ch.good { border-left-color: #34d399; }
.mp-ch.warn { border-left-color: #fbbf24; }
.mp-ch.crit { border-left-color: #f87171; }
.mp-ch-num { grid-area: num; font: 700 11px "JetBrains Mono", monospace; color: rgba(226,232,240,0.50); }
.mp-ch-name { grid-area: name; font-size: 13px; line-height: 1.35; color: #e3e8ef; overflow-wrap: anywhere; }
.mp-ch-p { grid-area: p; margin-top: 4px; font: 700 15px "JetBrains Mono", monospace; color: rgba(226,232,240,0.85); }
.mp-ch:not(.good):not(.warn):not(.crit) .mp-ch-p { font: 500 12px "DM Sans", system-ui, sans-serif; color: rgba(226,232,240,0.45); }
.mp-ch.good .mp-ch-p { color: #6ee7b7; }
.mp-ch.warn .mp-ch-p { color: #fbbf24; }
.mp-ch.crit .mp-ch-p { color: #f87171; }
.mp-ch-done { grid-area: done; font: 11px "JetBrains Mono", monospace; color: rgba(226,232,240,0.50); }
@media (max-width: 700px) {
  .mp-stat { padding: 10px 12px; }
  .mp-v { font-size: 22px; }
  .mp-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}