/* prep area styles (wave 3, prep builder). Use app.css tokens; keep the restrained house style. */

/* ---------------------------------------------------------------- list */
.prep-h2 { margin: 28px 2px 12px; font-size: 16px; }
.prep-card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--ink); }
.prep-card h3 { font-size: 16px; letter-spacing: -.01em; }
.prep-card-foot { display: flex; align-items: flex-start; gap: 7px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink-2); }
.prep-card-foot svg { flex: none; margin-top: 2px; color: var(--ink-3); }
.prep-mini { display: inline-flex; flex-direction: column; gap: 5px; min-width: 110px; }
.prep-mini.wide { min-width: 170px; }
.prep-mini .bar { width: 100%; }

/* ---------------------------------------------------------------- reader */
.prep-hero { margin-top: 14px; padding: 22px; }
.prep-hero h1 { margin-top: 4px; font-size: clamp(22px, 3vw, 28px); letter-spacing: -.02em; }
.prep-hero-ring { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.prep-reader { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; margin-top: 18px; align-items: start; }
.prep-nav { position: sticky; top: calc(var(--topbar) + 12px); }
.prep-nav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.prep-nav a { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 10px; border-radius: 8px; text-decoration: none; color: var(--ink-2); font-size: 13.5px; font-weight: 500; transition: background .15s, color .15s; }
.prep-nav a:hover { background: var(--surface-2); color: var(--ink); }
.prep-nav a[aria-current] { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.prep-nav .n { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex: none; font: 600 11.5px/1 var(--font-ui); color: var(--ink-3); border: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.prep-nav a[aria-current] .n { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.prep-nav .t { flex: 1; min-width: 0; }
.prep-nav .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); flex: none; }
.prep-content { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pb-sec { scroll-margin-top: calc(var(--topbar) + 14px); padding: 22px; }
.pb-sec:focus { outline: none; }
.pb-sec-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.pb-sec-head > div { flex: 1; min-width: 0; }
.pb-sec-head h2 { font-size: 18px; letter-spacing: -.015em; }
.pb-num { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--ink); color: var(--bg); font: 650 13px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.pb-sec-ic { color: var(--ink-3); }
.pb-h3 { font-size: 14px; font-weight: 650; margin: 20px 0 10px; }
.pb-h3:first-child { margin-top: 0; }
.prep-rich { font-size: 14.5px; line-height: 1.62; }
.prep-rich table { border-collapse: collapse; width: 100%; margin: .6em 0; font-size: 13.5px; }
.prep-rich th, .prep-rich td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top; overflow-wrap: normal; word-break: normal; }
.prep-rich th { white-space: nowrap; }
.prep-rich th { background: var(--surface-2); font-weight: 600; }
.prep-rich blockquote { border-left: 3px solid var(--line-2); padding-left: 12px; color: var(--ink-2); }
.prep-rich .math-block { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.pb-empty, .pp-empty { color: var(--ink-3); font-size: 13.5px; }
.nowrap { white-space: nowrap; }
th.c, td.c { text-align: center; }

/* 1 overview */
.pb-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.pb-fact { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); }
.pb-fact.wide { grid-column: 1 / -1; }
.pb-fact .k { font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.pb-fact .v { font-size: 14.5px; display: flex; flex-wrap: wrap; gap: 6px; }
.pb-fact .v.num { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.pb-band { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 7px; font-size: 13px; font-weight: 550; background: var(--surface-2); color: var(--ink-2); }
.pb-band.d { background: var(--ok-tint); color: var(--ok); }
.pb-band.m { background: var(--info-tint); color: var(--info); }
.pb-band.r { background: transparent; border: 1px solid var(--line-2); color: var(--ink-3); }

/* 2 checklist */
.pb-progress { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 14px; margin-bottom: 14px; font-size: 13.5px; }
.pb-progress .bar { grid-column: 1 / -1; }
.pb-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pb-checklist li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.pb-checklist li:last-child { border-bottom: 0; }
.pb-checklist .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pb-checklist li.done .main b { color: var(--ink-2); }
.pb-tick { width: 32px; height: 32px; flex: none; border-radius: 9px; border: 1.5px solid var(--line-2); background: var(--surface); color: transparent; display: grid; place-items: center; transition: background .2s var(--ease), border-color .2s, color .2s, transform .12s; }
.pb-tick:hover { border-color: var(--ink-3); }
.pb-tick:active { transform: scale(.94); }
.pb-tick[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); color: #fff; }
.pb-tick.sm { width: 26px; height: 26px; border-radius: 7px; }
.pb-box { width: 18px; height: 18px; flex: none; border: 1.5px solid var(--ink-3); border-radius: 4px; display: inline-grid; place-items: center; margin-top: 2px; }
.pb-box.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pb-covered a { color: var(--ink-2); }

/* 3 summaries + mind maps */
.pb-topics { display: flex; flex-direction: column; gap: 14px; }
.pb-topic { border: 1px solid var(--line); border-radius: var(--r-xl); padding: 18px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: calc(var(--topbar) + 14px); }
.pb-topic-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pb-topic-head h3 { font-size: 16px; margin-top: 3px; }
.pb-topic .btn { align-self: flex-start; }
.pb-terms { color: var(--ink-2); }
.mm-figure { margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); padding: 8px; }
.mm-figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 6px; }
.mm-graphic { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.mm-svg { display: block; width: 100%; min-width: calc(var(--vbw, 600) * .68px); height: auto; margin: 0 auto; font-family: var(--font-ui); }
.mm-edge { fill: none; stroke: var(--ink-3); stroke-width: 1.4; opacity: .7; }
.mm-edge-leaf { stroke-width: 1; opacity: .55; }
.mm-center { fill: var(--ink); }
.mm-center-text { fill: var(--bg); font-size: 15.5px; font-weight: 650; }
.mm-tag { fill: var(--bg); opacity: .72; font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.mm-branch { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.2; }
.mm-branch-text { fill: var(--ink); font-size: 13.5px; font-weight: 600; }
.mm-dot { fill: var(--ink-3); }
.mm-leaf-text { fill: var(--ink-2); font-size: 13px; }
.mm-outline { display: none; font-size: 13.5px; }
.mm-outline ul { margin: 6px 0 0; padding-left: 18px; }
.mm-outline li { margin: 3px 0; }
.mm-outline li > ul { margin-top: 2px; color: var(--ink-2); }
@media (max-width: 640px) { .mm-graphic { display: none; } .mm-outline { display: block; } }

/* 4 quick reference */
.pb-filter { max-width: 360px; margin-bottom: 4px; }
.pb-table { margin-bottom: 4px; }
.pb-table td { vertical-align: top; }
.pb-term { width: 34%; }
.pb-meaning .katex { font-size: 1.05em; }

/* 5 worked examples */
.pb-example { border: 1px solid var(--line); border-radius: var(--r-xl); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.pb-example h3 { font-size: 15.5px; }
.pb-label { display: flex; align-items: center; gap: 6px; font: 600 11px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.pb-a summary { cursor: pointer; display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-2); font-size: 13px; font-weight: 550; list-style: none; }
.pb-a summary::-webkit-details-marker { display: none; }
.pb-a[open] summary { margin-bottom: 10px; }
.pb-a[open] > .prep-rich { padding-left: 12px; border-left: 2px solid var(--ok); }
.pb-tips { border-radius: var(--r); background: var(--warn-tint); padding: 12px 14px; }
.pb-tips .pb-label { color: var(--warn); }

/* 6 practice */
.pb-ptopic { padding: 14px 0; border-bottom: 1px solid var(--line); }
.pb-ptopic:first-child { padding-top: 0; }
.pb-ptopic:last-child { border-bottom: 0; }
.pb-ptopic h3 { font-size: 15px; }
.pb-level { margin-top: 12px; }
.pb-level-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--ink-2); }
.pb-level-tag.medium { background: var(--info-tint); color: var(--info); }
.pb-level-tag.exam { background: var(--ink); color: var(--bg); }
.pb-plist { margin: 10px 0 0; padding-left: 30px; display: flex; flex-direction: column; gap: 12px; }
.pb-pq::marker { color: var(--ink-3); font-weight: 600; }
.pb-reveal { margin-top: 6px; }
.pb-answer { margin-top: 8px; padding: 10px 12px; border-radius: var(--r); background: var(--ok-tint); }
.pb-answers { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; }
.pb-answers ol { padding-left: 30px; }

/* 7 mocks */
.pb-mocks { display: grid; gap: 14px; }
.pb-mock { border: 1px solid var(--line); border-radius: var(--r-xl); padding: 18px; display: flex; flex-direction: column; gap: 8px; scroll-margin-top: calc(var(--topbar) + 14px); }
.pb-mock h3 { font-size: 16px; margin-top: 3px; }
.pb-mock-foot { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.pb-result { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pb-result b { font-size: 22px; letter-spacing: -.02em; }
.pb-locked { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); padding: 6px 10px; border-radius: 8px; background: var(--surface-2); }
.pb-selfmark { display: flex; flex-direction: column; gap: 8px; }
.pb-selfmark-form { gap: 8px; }

/* 8 planner */
.pb-plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pb-week { margin-top: 14px; }
.pb-week h4 { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.pb-sessions { list-style: none; margin: 0; padding: 0; }
.pb-sessions li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.pb-sessions .pb-day { width: 78px; flex: none; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; padding-top: 3px; }
.pb-sessions .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.pb-sessions .pb-mins { flex: none; padding-top: 3px; }
.pb-sessions li.done .main b { text-decoration: line-through; text-decoration-color: var(--ink-3); color: var(--ink-2); }
.pb-sessions li.missed .pb-day { color: var(--bad); }
.pb-sessions li.k-mock .main b::before, .pb-sessions li.k-review .main b::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: middle; background: var(--info); }
.pb-sessions li.k-review .main b::before { background: var(--ok); }
.pb-days { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-day-pick { position: relative; cursor: pointer; }
.pb-day-pick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pb-day-pick span { display: inline-grid; place-items: center; min-width: 48px; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); font-size: 13px; font-weight: 550; color: var(--ink-2); transition: background .15s, color .15s, border-color .15s; }
.pb-day-pick input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pb-day-pick input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.pb-blank td { height: 38px; }

/* 9 tracker */
.pb-weak ul { margin: 6px 0 0; padding-left: 18px; }
.pb-weak li { margin: 3px 0; }
.pb-scale { flex-wrap: nowrap; }
.pb-scale button { min-width: 30px; justify-content: center; padding: 0 8px; }
.pb-track td { vertical-align: middle; }
.pb-measured { margin-top: 12px; }
.pb-results .li b.num { font-size: 15px; }

/* 10 links */
.pb-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.pb-link-card { border: 1px solid var(--line); border-radius: var(--r-xl); padding: 16px; display: flex; flex-direction: column; gap: 12px; break-inside: avoid; }
.pb-link-card h3 { font-size: 14.5px; }
.pb-link-card h3 .faint { font-weight: 500; margin-right: 4px; }
.pb-qrs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qr-tile { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.qr-img { display: inline-grid; place-items: center; align-self: flex-start; padding: 6px; background: #fff; border-radius: 8px; border: 1px solid var(--line); }
.qr-img svg { display: block; width: 96px; height: 96px; }
.qr-tile figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; min-width: 0; }
.qr-tile figcaption span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qr-url { color: var(--ink-3); font-size: 11.5px; word-break: break-all; }
.pb-file-ic { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--ink-3); }

/* subject page card */
.prep-aside .bar { width: 100%; }

/* ---------------------------------------------------------------- mock player */
.mk-body { width: min(820px, 100%); }
.mk-intro h1 { font-size: 22px; margin: 4px 0 6px; letter-spacing: -.02em; }
.mk-map { position: sticky; top: 62px; z-index: 4; margin: 14px 0; padding: 10px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mk-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-dots a { min-width: 30px; height: 30px; padding: 0 6px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 600; color: var(--ink-2); text-decoration: none; font-variant-numeric: tabular-nums; }
.mk-dots a.answered { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.mk-qs { display: flex; flex-direction: column; gap: 14px; }
.mk-q { scroll-margin-top: 140px; }
.mk-q .qnum { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.mk-prompt { font-size: 17px; line-height: 1.5; font-weight: 550; margin: 10px 0 14px; letter-spacing: -.005em; }
.mk-submit { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding: 16px 0; }
.mk-hero { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; text-align: left; margin-bottom: 18px; }
.mk-grade { font-size: 32px; letter-spacing: -.03em; margin: 4px 0 6px; }
.mk-wrap .bar.bad > i, .quiz-wrap .bar.bad > i { background: var(--bad); }
.quiz-wrap .bar.warn > i { background: var(--warn); }

/* ---------------------------------------------------------------- editor */
.prep-tabs { margin-bottom: 16px; }
.prep-tabn { width: 20px; height: 20px; border-radius: 5px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; border: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.prep-tabs [aria-selected="true"] .prep-tabn { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.prep-tabdot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
.prep-bands { gap: 12px; }
.prep-bands label { display: inline-flex; align-items: center; gap: 8px; }
.prep-bands .input { width: 80px; }
.pe-rt { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.pe-rt-bar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 5px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.pe-rt .rt-btn { min-width: 32px; height: 30px; padding: 0 8px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 13px; }
.pe-rt .rt-btn:hover { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.pe-rt .rt-btn[aria-pressed="true"], .pe-rt .rt-btn[aria-expanded="true"] { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.pe-sep { width: 1px; height: 18px; background: var(--line-2); margin: 0 4px; }
.pe-maths { display: flex; flex-wrap: wrap; gap: 2px; padding: 5px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.pe-area { border: 0; border-radius: 0; min-height: 120px; padding: 12px 14px; box-shadow: none; overflow-wrap: anywhere; }
.pe-area:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--focus) 30%, transparent); }
.pe-area:empty::before { content: 'Write here'; color: var(--ink-3); }
.pe-preview { padding: 12px 14px; min-height: 120px; }
.pe-inline-prev { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.prep-split { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.prep-topiclist ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.prep-topiclist button { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border-radius: 8px; border: 0; background: transparent; text-align: left; font-size: 13.5px; color: var(--ink-2); }
.prep-topiclist button:hover { background: var(--surface-2); color: var(--ink); }
.prep-topiclist button.on { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.prep-topiclist .t { flex: 1; min-width: 0; }
.prep-topiclist .pb-sec-head { margin-bottom: 10px; }
.pe-mm-img { display: block; max-width: 260px; border-radius: 8px; border: 1px solid var(--line); margin-top: 8px; }
.pe-mm-preview { margin-top: 12px; }
.prep-edlist { list-style: none; margin: 0; padding: 0; }
.prep-edlist li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.prep-edlist li:last-child { border-bottom: 0; }
.prep-edlist .main { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.prep-picks { max-height: 240px; }
.prep-suggest { grid-template-columns: 1fr; max-height: 52vh; }
.prep-suggest .pick { align-items: flex-start; }
.prep-mockrow { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.prep-mockrow .main { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 6px; }
.prep-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prep-upload { padding: 14px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); }

@media (max-width: 980px) {
  .prep-reader { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .prep-nav { min-width: 0; }
  .prep-nav { top: var(--topbar); z-index: 6; margin: 0 -16px; padding: 8px 16px; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .prep-nav ol { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 4px; }
  .prep-nav ol::-webkit-scrollbar { display: none; }
  .prep-nav a { white-space: nowrap; min-height: 32px; padding: 4px 10px 4px 6px; border: 1px solid var(--line); }
  .prep-split { grid-template-columns: minmax(0, 1fr); }
  .prep-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .prep-hero { padding: 16px; }
  .prep-hero .subj-badge.lg { display: none; }
  .pb-sec { padding: 16px; }
  .pb-topic, .pb-example, .pb-mock { padding: 14px; }
  .pb-facts { grid-template-columns: 1fr; }
  .pb-qrs { grid-template-columns: 1fr 1fr; gap: 8px; }
  .qr-img svg { width: 84px; height: 84px; }
  .pb-links { grid-template-columns: 1fr; }
  .pb-sessions .pb-day { width: 60px; }
  .pb-sessions .pb-mins { display: none; }
  .pb-term { width: 40%; }
  .prep-rich table { display: block; overflow-x: auto; }
  .prep-rich th { white-space: normal; }
  .mk-map { top: 58px; }
}

/* ---------------------------------------------------------------- printable book (always dark on white) */
.prep-print {
  color-scheme: light;
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F3F3F0; --surface-3: #E9E9E5; --ink: #141416; --ink-2: #4A4A50; --ink-3: #75757C; --line: #DCDCD6; --line-2: #C9C9C2;
  --ok: #157F4F; --ok-tint: #E6F4EC; --warn: #8F6200; --warn-tint: #FBF1DA; --bad: #B42318; --bad-tint: #FCECEA; --info: #2554B8; --info-tint: #E9EFFB; --brand: #D7141D;
  min-height: 100dvh; background: #E9E9E5; color: var(--ink); padding-bottom: 32px;
}
.pp-loading { padding: 40px; text-align: center; color: var(--ink-3); }
.pp-toolbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.pp-doc { display: flex; flex-direction: column; align-items: center; }
.pp-page { width: 210mm; max-width: calc(100% - 32px); min-height: 297mm; margin: 16px auto 0; background: #fff; padding: 18mm 16mm; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 30px -14px rgba(0, 0, 0, .25); border-radius: 3px; }
.pp-page .pb-sec-head { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.pp-page .pb-sec-head h2 { font-size: 20px; }
.pp-cover { display: flex; flex-direction: column; }
.pp-cover-top { display: flex; align-items: center; gap: 14px; }
.pp-cover h1 { font-size: 40px; line-height: 1.05; letter-spacing: -.03em; margin-top: 60mm; }
.pp-cover-sub { font-size: 18px; color: var(--ink-2); margin-top: 10px; }
.pp-cover-format { margin-top: 16px; max-width: 60ch; color: var(--ink-2); }
.pp-cover-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.pp-cover-foot > div { display: flex; flex-direction: column; gap: 3px; }
.pp-cover-foot b { font-size: 18px; }
.pp-cover-foot .qr-tile { flex-direction: row; align-items: center; max-width: 300px; }
.pp-toc h2 { font-size: 22px; margin-bottom: 16px; }
.pp-toc > ol { padding-left: 24px; display: flex; flex-direction: column; gap: 10px; }
.pp-toc > ol > li > b { display: block; }
.pp-toc > ol > li > span { font-size: 13px; }
.pp-toc-topics { margin-top: 4px; padding-left: 18px; list-style: lower-alpha; font-size: 13px; color: var(--ink-2); }
.pp-app { list-style: '+  '; }
.pp-howto { margin-top: 28px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; }
.pp-howto h3 { font-size: 14px; margin-bottom: 6px; }
.pp-howto ul { padding-left: 18px; font-size: 13.5px; }
.pp-sec .pb-topic, .pp-sec .pb-example, .pp-sec .pb-mock { border-color: var(--line); }
.pp-sec .mm-figure { background: #fff; }
.pp-sec .mm-svg { min-width: 0; }
.pp-sec table.t th { position: static; }
@media (max-width: 680px) { .pp-page { padding: 18px 16px; min-height: 0; } .pp-cover h1 { margin-top: 40px; font-size: 30px; } .pp-cover-foot { flex-direction: column; align-items: flex-start; } }

/* A named page, so other areas' print layouts are untouched. */
@page prepbook { size: A4; margin: 14mm 13mm 16mm; }
.prep-print { page: prepbook; }
@media print {
  html:has(.prep-print), body:has(.prep-print) { background: #fff !important; }
  body:has(.prep-print) { page: prepbook; }
  /* learn.css hides every element in print except certificates; the book is shown again here. */
  .prep-print, .prep-print * { visibility: visible !important; }
  body:has(.prep-print) #app, body:has(.prep-print) main { min-height: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important; }
  body:has(.prep-print) #toasts, body:has(.prep-print) #overlays, body:has(.prep-print) .skip-link, .pp-toolbar { display: none !important; visibility: hidden !important; }
  .prep-print { background: #fff; padding: 0; min-height: 0; }
  .pp-doc { display: block; }
  .pp-page { width: auto; max-width: none; min-height: 0; margin: 0; padding: 0; box-shadow: none; border-radius: 0; break-after: page; }
  .pp-page:last-child { break-after: auto; }
  .pp-cover { min-height: 260mm; }
  .prep-print :is(.pb-topic, .pb-example, .pb-mock, .pb-link-card, .pb-week, .mm-figure, .pb-fact, tr, .pb-pq, .pb-checklist li, .pb-sessions li) { break-inside: avoid; }
  .prep-print :is(.pb-sec-head, .pb-h3, h3) { break-after: avoid; }
  .prep-print .mm-graphic { display: block !important; overflow: visible; }
  .prep-print .mm-svg { min-width: 0; }
  .prep-print .tablewrap { overflow: visible; }
  .prep-print .mm-outline { display: none !important; }
  .prep-print .qr-img svg { width: 30mm; height: 30mm; }
  .prep-print a { color: inherit; text-decoration: none; }
}