/* ================= /review-lessons =================
   Generated pages (tools/lessons-gen in the parent repo) link shared.css,
   experts.css, then this file. Only what experts.css lacks lives here:
   lesson and theme cards, code blocks and their syntax colours, the check, the checklist.
   Plain-text cards, no pills. Code scrolls inside its own block. */

/* cards: index themes, theme lessons, related lessons */
.l-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.l-card,.t-card{display:flex;flex-direction:column;gap:10px;min-width:0;border:1px solid var(--ink-15);border-radius:6px;background:var(--paper);padding:26px 26px 20px;transition:border-color .25s ease, transform .3s ease}
.l-card:hover,.t-card:hover{border-color:var(--ink);transform:translateY(-3px)}
.l-card h3,.t-card h3{font-size:21px;line-height:1.22;font-weight:500;letter-spacing:-0.015em;margin:0;overflow-wrap:anywhere}
.l-card p,.t-card p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-60);overflow-wrap:anywhere}
.l-card p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.l-card p code,.t-card p code{font-family:var(--mono);font-size:.88em}
.l-meta{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-40)}
.l-more{margin-top:auto;padding-top:14px;border-top:1px solid var(--ink-08);font-size:13px;font-weight:500;color:var(--ink)}
.l-more span{color:var(--ink-60)}
.t-card h3{font-size:24px}

/* code: escaped <pre><code>, no highlighter; scrolls inside the figure, never the page */
.prose figure.code{margin:8px 0 28px;max-width:100%;min-width:0;border:1px solid var(--ink-15);border-radius:6px;background:var(--paper);overflow:hidden}
.prose figure.code figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-40);padding:10px 16px;border-bottom:1px solid var(--ink-15)}
.prose figure.code pre{margin:0;padding:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;font-family:var(--mono);font-size:13.5px;line-height:1.6;color:var(--ink);tab-size:2;white-space:pre}
.prose figure.code pre code{font:inherit;background:none;padding:0;border:0}
.prose.lesson{min-width:0}

/* syntax colours: spans written at build time by tools/lessons-gen/highlight.py (no runtime JS).
   Light = the paper code block above (all AA on #fafaf7); .dark = an ink block (research-report style). */
.tok-c{color:#6b6b65;font-style:italic}
.tok-s{color:#2d6a1e}
.tok-k{color:#7a2fb0}
.tok-n{color:#a34700}
.tok-f{color:#1d5aa6}
.tok-t{color:#b02a1f}
.tok-a{color:#8a5a00}
figure.code.dark{background:var(--ink);border-color:var(--ink)}
figure.code.dark figcaption{color:rgba(250,250,247,.5);border-bottom-color:rgba(250,250,247,.15)}
figure.code.dark pre{color:#e9e9e4}
.dark .tok-c{color:#8f8f88}
.dark .tok-s{color:#C4FF47}
.dark .tok-k{color:#c9a7ff}
.dark .tok-n{color:#ffb070}
.dark .tok-f{color:#8cc8ff}
.dark .tok-t{color:#ff8a7a}
.dark .tok-a{color:#ffd57a}

/* inline code in running text */
.prose p code,.prose li code,.lede code,.lead-in code,.checklist code,.ans code{font-family:var(--mono);font-size:.84em;background:var(--ink-08);padding:1px 5px;border-radius:3px;overflow-wrap:anywhere}

/* the check: the question a reader takes away */
.prose .check-q{font-family:var(--display);font-size:clamp(22px,2.2vw,28px);line-height:1.3;letter-spacing:-0.015em;font-weight:500;margin:0 0 18px;padding:20px 0 20px 22px;border-left:3px solid var(--accent)}

/* theme checklist (B-case checks) */
.checklist{max-width:860px;margin:0;padding:0;list-style:none;counter-reset:ck;border-top:1px solid var(--ink-15)}
.checklist li{counter-increment:ck;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--ink-15);font-size:17px;line-height:1.5}
.checklist li::before{content:counter(ck,decimal-leading-zero);font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-40);padding-top:5px}

/* index + theme bits */
.xsec > .lead-in.small{font-family:var(--mono);font-size:12px;letter-spacing:.03em;line-height:1.6;color:var(--ink-40);max-width:72ch}
.xsec > .lead-in a.inline{color:var(--ink);border-bottom:1px solid var(--ink-15)}
.xsec > .lead-in a.inline:hover{border-bottom-color:var(--ink)}
.need-group h3 a{display:inline;padding:0;font:inherit;letter-spacing:inherit;color:inherit}
.need-group h3 a:hover{color:var(--ink)}

@media (max-width:1100px){
  .l-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .l-grid{grid-template-columns:minmax(0,1fr)}
  .l-card,.t-card{padding:22px 20px 18px}
  .prose figure.code pre{font-size:12.5px;padding:14px}
  .prose .check-q{padding-left:16px}
  .checklist li{grid-template-columns:32px minmax(0,1fr)}
}