/* Prose, tables, diagrams and callouts for /digital-electronics/<lesson> pages
   (scripts/build-digital-electronics.js). Reuses the site's existing --ps-* theme tokens, so dark mode
   needs no separate rules here. */

.de-lesson { max-width: 760px; margin: 0 auto; }
.de-lesson h2 { margin: 40px 0 14px; font-size: 1.45rem; scroll-margin-top: 90px; }
.de-lesson h2:first-child { margin-top: 0; }
.de-lesson h3 { margin: 28px 0 10px; font-size: 1.1rem; scroll-margin-top: 90px; }
.de-lesson p { margin: 0 0 16px; color: var(--ps-body); line-height: 1.7; font-size: 1.02rem; }
.de-lesson ul, .de-lesson ol { margin: 0 0 16px; padding-left: 1.4em; color: var(--ps-body); line-height: 1.7; }
.de-lesson li + li { margin-top: 6px; }
.de-lesson strong { color: var(--ps-ink); }
.de-lesson code { padding: 2px 6px; border-radius: 5px; background: var(--ps-soft); font-size: 0.92em; }

/* Truth tables, conversion tables. */
.de-lesson table { width: 100%; margin: 4px 0 22px; border-collapse: collapse; font-size: 0.95rem; }
.de-lesson caption { margin-bottom: 8px; text-align: left; color: var(--ps-muted); font-size: 0.85rem; }
.de-lesson th, .de-lesson td { padding: 9px 12px; border: 1px solid var(--ps-line); text-align: center; }
.de-lesson th { background: var(--ps-soft); color: var(--ps-ink); font-weight: 600; }
.de-lesson td:first-child, .de-lesson th:first-child { text-align: left; }

/* A worked example or definition box. */
.de-box { margin: 20px 0; padding: 18px 22px; border: 1px solid var(--ps-line); border-left: 3px solid var(--ps-primary); border-radius: 10px; background: var(--ps-card); }
.de-box p:last-child { margin-bottom: 0; }
.de-box-label { display: block; margin-bottom: 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ps-primary); }

/* A takeaways list at the end of a section. */
.de-takeaways { margin: 20px 0; padding: 18px 22px; border-radius: 10px; background: var(--ps-primary-soft); }
.de-takeaways p { margin: 0 0 8px; font-weight: 700; color: var(--ps-ink); }
.de-takeaways ul { margin-bottom: 0; }

/* Inline SVG diagrams (gate symbols, K-maps, conversion ladders). */
.de-figure { margin: 24px 0; text-align: center; }
.de-figure svg { max-width: 100%; height: auto; }
.de-figure figcaption { margin-top: 10px; color: var(--ps-muted); font-size: 0.85rem; }
.de-figure-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin: 24px 0; }
.de-figure-row .de-figure { margin: 0; flex: 1 1 200px; max-width: 240px; }

/* Lesson hero (reuses ps-page-hero's layout; just a few overrides). */
.de-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; color: var(--ps-muted); font-size: 0.9rem; }

/* Prev/next chapter pager, reused from the prepsprint style already on the site. */
.de-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 48px 0 0; }
.de-pager a { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--ps-line); border-radius: 12px; background: var(--ps-card); text-decoration: none; }
.de-pager a:hover { border-color: var(--ps-primary-border); }
.de-pager a[rel="next"] { text-align: right; }
.de-pager span { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ps-muted); }
.de-pager strong { color: var(--ps-ink); font-size: 0.98rem; }
@media (max-width: 640px) { .de-pager { grid-template-columns: 1fr; } .de-pager a[rel="next"] { text-align: left; } }