/* book.css — the book view of a course. Screen = a centred sheet. Print = clean A4 pages. */
:root { --bk-max: 760px; }
html { background: var(--bg, #F5F5F5); }
body.bk-body { margin: 0; font-family: 'Inter', 'Noto Sans Bengali', 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--text, #111111); line-height: 1.6; font-size: 16px; }

/* toolbar (screen only) */
.bk-toolbar { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; padding: 0.7rem 1rem; background: var(--surface, #FFFFFF); border-bottom: 1px solid var(--border, #E2E2E2); }
.bk-toolbar__title { font-weight: 700; color: var(--heading, #111111); margin-right: auto; }
.bk-toolbar__opts { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; font-size: 0.85rem; color: var(--text-muted, #666666); }
.bk-toolbar__opts label { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.bk-btn { display: inline-flex; align-items: center; gap: 0.4rem; height: 38px; padding: 0 1rem; border-radius: 22px; border: 1px solid var(--heading, #111111); background: var(--heading, #111111); color: var(--bg, #F5F5F5); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.bk-btn--ghost { background: transparent; color: var(--heading, #111111); }
.bk-btn svg { width: 16px; height: 16px; }
.bk-tip { width: 100%; margin: 0; font-size: 0.8rem; color: var(--text-muted, #666666); }
.bk-error { max-width: var(--bk-max); margin: 3rem auto; padding: 1.5rem; background: var(--surface, #FFFFFF); border: 1px solid var(--border, #E2E2E2); border-radius: 12px; text-align: center; }

/* the sheet */
.bk-book { max-width: var(--bk-max); margin: 1.5rem auto 4rem; padding: 2.5rem 2.2rem; background: var(--surface, #FFFFFF); border: 1px solid var(--border, #E2E2E2); border-radius: 12px; }
.bk-book p { margin: 0 0 0.7rem; }
.bk-book a { color: inherit; }

.bk-cover { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; border-bottom: 2px solid var(--heading, #111111); margin-bottom: 2rem; padding-bottom: 2rem; }
.bk-cover__org { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; font-weight: 700; color: var(--text-muted, #666666); }
.bk-cover__title { font-size: 2.4rem; line-height: 1.15; font-weight: 800; color: var(--heading, #111111); margin: 0.6rem 0 1rem; }
.bk-cover__sub { font-size: 1.1rem; color: var(--text-muted, #666666); }
.bk-cover__meta { font-weight: 600; margin-top: 1.5rem; }
.bk-cover__url { font-size: 0.8rem; color: var(--text-muted, #666666); word-break: break-all; }

.bk-part__title { font-size: 1.5rem; font-weight: 800; color: var(--heading, #111111); margin: 2.2rem 0 1rem; }
.bk-part__title--divider { padding-top: 1.4rem; border-top: 2px solid var(--heading, #111111); text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.05rem; }
.bk-howto ol { padding-left: 1.2rem; }
.bk-howto li { margin-bottom: 0.5rem; }

.bk-toc__topic { font-weight: 700; margin: 1rem 0 0.3rem; color: var(--heading, #111111); }
.bk-toc__list { list-style: none; margin: 0; padding: 0; }
.bk-toc__list li { padding: 0.15rem 0; border-bottom: 1px dotted var(--border, #E2E2E2); }
.bk-toc__list a { text-decoration: none; }
.bk-toc__n { display: inline-block; min-width: 2rem; font-weight: 700; color: var(--text-muted, #666666); }

.bk-chapter { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--border, #E2E2E2); }
.bk-chapter__num { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 700; color: var(--text-muted, #666666); margin: 0; }
.bk-chapter__title { font-size: 1.7rem; line-height: 1.2; font-weight: 800; color: var(--heading, #111111); margin: 0.2rem 0 0.4rem; }
.bk-chapter__sub { color: var(--text-muted, #666666); font-size: 1.02rem; }

.bk-sec { margin-top: 1.3rem; }
.bk-sec__label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--text-muted, #666666); margin: 0 0 0.45rem; }
.bk-sec--analogy, .bk-sec--eli5, .bk-sec--try, .bk-sec--fact { padding: 0.9rem 1rem; border: 1px solid var(--border, #E2E2E2); border-left: 4px solid var(--heading, #111111); border-radius: 8px; background: var(--bg, #F5F5F5); }
.bk-sec--analogy p:last-child, .bk-sec--eli5 p:last-child, .bk-sec--try p:last-child, .bk-sec--fact p:last-child { margin-bottom: 0; }

/* the picture: boxes joined by arrows */
.bk-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; counter-reset: bkflow; }
.bk-flow__step { position: relative; flex: 1 1 150px; counter-increment: bkflow; padding: 0.7rem 0.8rem 0.7rem 2.3rem; border: 1.5px solid var(--heading, #111111); border-radius: 10px; font-size: 0.9rem; font-weight: 600; line-height: 1.35; background: var(--surface, #FFFFFF); }
.bk-flow__step::before { content: counter(bkflow); position: absolute; left: 0.6rem; top: 0.65rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--heading, #111111); color: var(--surface, #FFFFFF); font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.bk-flow__step:not(:last-child)::after { content: "\2192"; position: absolute; right: -1.25rem; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--text-muted, #666666); }

.bk-points { margin: 0; }
.bk-point { padding: 0.55rem 0; border-bottom: 1px solid var(--border, #E2E2E2); }
.bk-point dt { font-weight: 700; color: var(--heading, #111111); }
.bk-point dd { margin: 0.15rem 0 0; }

.bk-code { margin: 0 0 0.7rem; padding: 0.9rem 1rem; background: #F3F3F3; color: #111111; border: 1px solid #DDDDDD; border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; direction: ltr; text-align: left; }
.bk-walk { padding-left: 2.2rem; font-size: 0.92rem; }
.bk-walk li { margin-bottom: 0.25rem; }
.bk-hint { font-size: 0.92rem; }

.bk-quiz { padding-left: 2rem; }
.bk-quiz__item { margin-bottom: 0.8rem; }
.bk-quiz__q { font-weight: 600; margin-bottom: 0.25rem; }
.bk-quiz__opts { padding-left: 1.4rem; margin: 0; }

.bk-res { padding-left: 1.2rem; font-size: 0.9rem; }
.bk-res__src { color: var(--text-muted, #666666); }

.bk-cheat__table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.bk-cheat__table th, .bk-cheat__table td { border: 1px solid var(--border, #E2E2E2); padding: 0.35rem 0.5rem; text-align: left; vertical-align: top; }
.bk-cheat__table th { background: var(--bg, #F5F5F5); }
.bk-cheat__n { width: 2rem; font-weight: 700; }
.bk-cheat__t { width: 28%; font-weight: 600; }

.bk-answers__row { padding: 0.5rem 0; border-bottom: 1px solid var(--border, #E2E2E2); }
.bk-answers__ch { font-weight: 700; margin-bottom: 0.15rem; }
.bk-answers__keys, .bk-answers__bug { margin-bottom: 0.15rem; font-size: 0.92rem; }

[dir="rtl"] .bk-flow__step { padding: 0.7rem 2.3rem 0.7rem 0.8rem; }
[dir="rtl"] .bk-flow__step::before { left: auto; right: 0.6rem; }
[dir="rtl"] .bk-flow__step:not(:last-child)::after { content: "\2190"; right: auto; left: -1.25rem; }

@media (max-width: 600px) {
  .bk-book { margin: 0.6rem; padding: 1.3rem 1rem; }
  .bk-cover__title { font-size: 1.8rem; }
}

/* paper */
@page { size: A4; margin: 18mm 16mm; }
@media print {
  html, body.bk-body { background: #FFFFFF; color: #000000; font-size: 10.5pt; }
  .bk-toolbar, .bk-error { display: none; }
  .bk-book { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: #FFFFFF; }
  .bk-cover { min-height: 230mm; break-after: page; }
  .bk-toc { break-after: page; }
  .bk-chapter { break-before: page; border-top: 0; margin-top: 0; padding-top: 0; }
  .bk-part__title--divider { break-before: page; break-after: avoid; }
  .bk-part__title--divider + .bk-chapter { break-before: avoid; }
  .bk-cheat, .bk-answers { break-before: page; }
  .bk-sec__label, .bk-chapter__head { break-after: avoid; }
  .bk-point, .bk-flow, .bk-quiz__item, .bk-sec--analogy, .bk-sec--eli5, .bk-sec--try, .bk-sec--fact, .bk-answers__row, .bk-cheat__table tr { break-inside: avoid; }
  .bk-code { font-size: 8.5pt; background: #F3F3F3; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bk-flow__step::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bk-res a::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
  .bk-toc__list a { text-decoration: none; color: #000000; }
}