/* ============================================================================
   A4 — the handout, and the booklet built from thirty of them.

   On screen: a neutral workspace with sheets of paper laid on it, the way a
   print preview looks. In print: only the paper. The workspace, its shadows
   and every interface control are removed, and colour collapses to ink.
   ========================================================================== */

.sheet-wrap {
  --sheet-w: 210mm;
  --sheet-pad: 17mm 18mm 18mm;
  background: var(--surface-3);
  border-radius: var(--r-lg);
  padding: clamp(var(--s-4), 3vw, var(--s-10)) var(--s-4);
  display: grid; justify-items: center; gap: var(--s-6);
}

.sheet {
  inline-size: min(var(--sheet-w), 100%);
  padding: var(--sheet-pad);
  background: #fffdf9;
  color: #16181d;
  border-radius: 2px;
  box-shadow: var(--sh-3);
  font-family: var(--font-read);
  font-size: 11.2pt;
  line-height: 1.85;
}
/* the sheet is paper: it keeps its own light colours whatever the screen theme */
:root[data-theme="dark"] .sheet { background: #f7f4ee; }

.sheet h1, .sheet h2, .sheet h3, .sheet h4 { font-family: var(--font-read); color: #16181d; }
.sheet p { margin: 0 0 2.6mm; text-align: justify; orphans: 3; widows: 3; }
.sheet a { color: #6d4617; text-decoration: none; }

/* ------------------------------------------------------------ the header */
.ho-head { border-block-end: 1.6pt solid #8a5a20; padding-block-end: 3mm; margin-block-end: 6mm; }
.ho-head .ho-book {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-ui); font-size: 8.5pt; color: #6d7079;
  margin-block-end: 2mm;
}
.ho-head .ho-book b { color: #8a5a20; font-size: 9.5pt; letter-spacing: .01em; }
.ho-head h1 { font-size: 17pt; line-height: 1.38; margin: 0 0 1.5mm; }
.ho-head .ho-sub { font-size: 10.5pt; color: #4a4e57; margin: 0 0 2mm; }

.ho-place {
  display: flex; flex-wrap: wrap; gap: 1mm 3mm;
  font-family: var(--font-ui); font-size: 7.6pt; color: #6d7079;
}
.ho-place b { color: #4a4e57; font-weight: 600; }
.ho-place span::after { content: " ·"; color: #c8bfab; }
.ho-place span:last-child::after { content: none; }

.ho-meta {
  display: flex; flex-wrap: wrap; gap: 1mm 5mm;
  font-family: var(--font-ui); font-size: 8pt; color: #6d7079;
  padding-block: 2mm; margin-block-end: 5mm;
  border-block-end: .4pt solid #ddd6c7;
}

/* --------------------------------------------------------------- headings */
.sheet h2.ho-h {
  font-size: 13.5pt; color: #8a5a20;
  margin: 7mm 0 2.5mm; padding-block-end: 1.2mm;
  border-block-end: .5pt solid #ddd6c7;
  break-after: avoid; page-break-after: avoid;
}
.sheet h3.ho-h3 {
  font-size: 11.8pt; margin: 4.5mm 0 1.8mm;
  break-after: avoid; page-break-after: avoid;
}

/* ------------------------------------------------------------- objectives */
.ho-obj {
  background: #faf7f0; border: .4pt solid #ddd6c7;
  border-inline-start: 1.6pt solid #8a5a20;
  border-radius: 1.5mm; padding: 3mm 4mm; margin-block-end: 6mm;
  break-inside: avoid;
}
html[dir="rtl"] .sheet .ho-obj {
  border-inline-start: .4pt solid #ddd6c7; border-inline-end: 1.6pt solid #8a5a20;
}
.ho-obj h2 {
  font-family: var(--font-ui); font-size: 10pt; color: #8a5a20;
  margin: 0 0 1.5mm; border: 0; padding: 0;
}
.ho-obj ol { margin: 0; padding-inline-start: 6mm; }
.ho-obj li { font-size: 10.4pt; line-height: 1.75; margin-block-end: 1mm; }

/* --------------------------------------------------- verbatim book text */
.sheet .srcq {
  background: #f6f2e9; border: .4pt solid #ddd6c7;
  border-inline-start: 1.4pt solid #b38a4d;
  border-radius: 1.5mm; padding: 2.8mm 3.5mm; margin: 3mm 0;
  break-inside: avoid;
}
html[dir="rtl"] .sheet .srcq {
  border-inline-start: .4pt solid #ddd6c7; border-inline-end: 1.4pt solid #b38a4d;
}
.sheet .srcq p { font-size: 11pt; line-height: 1.9; margin-block-end: 2mm; }
.sheet .srcq p:last-of-type { margin-block-end: 0; }
.sheet .srcq .srcq-foot {
  font-family: var(--font-ui); font-size: 7.4pt; color: #6d7079;
  margin-block-start: 2mm; padding-block-start: 1.2mm;
  border-block-start: .4pt dashed #ddd6c7;
  display: flex; flex-wrap: wrap; gap: .8mm 3mm;
}

/* ---------------------------------------------------------- the callouts */
.sheet .kbox {
  border: .4pt solid #c8bfab; border-inline-start: 1.4pt solid #6d7079;
  border-radius: 1.5mm; padding: 2.6mm 3.4mm; margin: 3mm 0;
  background: #fff; break-inside: avoid;
}
html[dir="rtl"] .sheet .kbox {
  border-inline-start: .4pt solid #c8bfab; border-inline-end: 1.4pt solid #6d7079;
}
.sheet .kbox > .kbox-h {
  font-family: var(--font-ui); font-size: 8pt; font-weight: 600;
  color: #4a4e57; margin-block-end: 1.2mm;
}
.sheet .kbox p { font-size: 10.6pt; line-height: 1.8; }
.sheet .kbox[data-kind="rule"], .sheet .kbox[data-kind="principle"],
.sheet .kbox[data-kind="definition"] { background: #faf6ee; }
html[dir="rtl"] .sheet .kbox[data-kind="rule"],
html[dir="rtl"] .sheet .kbox[data-kind="principle"],
html[dir="rtl"] .sheet .kbox[data-kind="definition"] { border-inline-end-color: #8a5a20; }
html[dir="rtl"] .sheet .kbox[data-kind="law"],
html[dir="rtl"] .sheet .kbox[data-kind="constitution"] { border-inline-end-color: #1a2438; }
html[dir="rtl"] .sheet .kbox[data-kind="opinion"] { border-inline-end-color: #8a6212; }
html[dir="rtl"] .sheet .kbox[data-kind="case"] { border-inline-end-color: #2f6b45; }
.sheet .kbox[data-kind="note"] { border-style: dashed; background: #faf7f0; }

/* ------------------------------------------------------- lists & tables */
.sheet .klist { margin: 3mm 0; break-inside: avoid; }
.sheet .klist h4, .sheet .ktable h4, .sheet .kdiag h4 {
  font-family: var(--font-ui); font-size: 8.4pt; color: #4a4e57; margin-block-end: 1.5mm;
}
.sheet .klist ol, .sheet .klist ul { margin: 0; padding-inline-start: 6mm; }
.sheet .klist li { font-size: 10.6pt; line-height: 1.78; margin-block-end: 1mm; }

.sheet .ktable { margin: 4mm 0; break-inside: avoid; overflow: visible; }
.sheet .ktable table { width: 100%; border-collapse: collapse; font-size: 9.6pt; min-width: 0; }
.sheet .ktable th, .sheet .ktable td {
  padding: 1.5mm 2.2mm; border: .4pt solid #c8bfab;
  text-align: start; vertical-align: top; line-height: 1.62;
  position: static;
}
.sheet .ktable th {
  background: #f0ece2; font-family: var(--font-ui); font-size: 8.4pt;
  font-weight: 600; color: #4a4e57;
}
.sheet .ktable th[scope="row"] { color: #6d4617; white-space: normal; }
.sheet .ktable .note { font-family: var(--font-ui); font-size: 7.6pt; color: #6d7079; margin-block-start: 1.2mm; }

.sheet .kdiag { margin: 4mm 0; break-inside: avoid; }
.sheet .kdiag .flow { display: flex; gap: 1.5mm; align-items: stretch; }
.sheet .kdiag .flow .node {
  flex: 1 1 0; background: #f6f2e9; border: .4pt solid #ddd6c7;
  border-radius: 1mm; font-size: 9.2pt; padding: 2mm 2.2mm; line-height: 1.55;
  display: flex; align-items: center;
}
.sheet .kdiag .flow .arrow { flex: none; align-self: center; color: #8a5a20; font-size: 10pt; }
.sheet .kdiag .hier { display: grid; gap: 2mm; }
.sheet .kdiag .hier .root {
  text-align: center; background: #f0e6d4; border: .4pt solid #c8bfab;
  color: #6d4617; font-size: 10.5pt; font-weight: 700; padding: 1.6mm; border-radius: 1mm;
}
.sheet .kdiag .hier .cols { display: grid; gap: 2mm; grid-template-columns: repeat(auto-fit, minmax(38mm, 1fr)); }
.sheet .kdiag .hier .branch { background: #faf7f0; border: .4pt solid #ddd6c7; border-radius: 1mm; padding: 2mm; }
.sheet .kdiag .hier .branch > b {
  display: block; font-family: var(--font-ui); font-size: 8.4pt; color: #4a4e57; margin-block-end: 1mm;
}
.sheet .kdiag .hier .branch ul { list-style: none; margin: 0; padding: 0; }
.sheet .kdiag .hier .branch li { font-size: 9.6pt; line-height: 1.6; margin-block-end: .6mm; }

/* --------------------------------------------- terms, summary, questions */
.sheet .term, .sheet .qitem { break-inside: avoid; }
.sheet .terms { gap: 2mm; }
.sheet .term { background: #faf7f0; border: .4pt solid #ddd6c7; padding: 2.4mm 3mm; border-radius: 1.5mm; }
.sheet .term dt { font-size: 10.6pt; color: #6d4617; }
.sheet .term dd { font-size: 10.2pt; line-height: 1.75; color: #4a4e57; }
.sheet ol.qlist { padding-inline-start: 6mm; }
.sheet ol.qlist li { font-size: 10.6pt; line-height: 1.8; margin-block-end: 1.4mm; }
.sheet .quiz { gap: 2.5mm; }
.sheet .qitem { background: #fff; border: .4pt solid #ddd6c7; padding: 2.4mm 3mm; }
.sheet .qq { font-size: 10.6pt; margin-block-end: 1.5mm; }
.sheet .qopts button { font-size: 10pt; padding: 1mm 2.5mm; min-height: 0; background: #faf7f0; border-color: #ddd6c7; }
.sheet .qwhy { font-size: 9.4pt; color: #4a4e57; }
.sheet .appx { margin-block-start: 6mm; }

/* ------------------------------------------------------------ the footer */
.ho-foot {
  display: flex; justify-content: space-between; gap: 3mm;
  font-family: var(--font-ui); font-size: 7.6pt; color: #6d7079;
  margin-block-start: 8mm; padding-block-start: 2mm;
  border-block-start: .4pt solid #c8bfab;
}

/* ================================================================ booklet */
.bk-section { break-before: page; page-break-before: always; }

.bk-cover {
  text-align: center; display: flex; flex-direction: column;
  min-block-size: 238mm;
}
.bk-cover .bk-org { font-family: var(--font-ui); font-size: 11.5pt; color: #4a4e57; line-height: 2.1; margin-block-end: auto; }
.bk-cover .bk-title { font-size: 34pt; font-weight: 700; color: #8a5a20; margin: 0 0 3mm; line-height: 1.12; }
.bk-cover .bk-kind { font-size: 17pt; margin: 0 0 2mm; color: #16181d; }
.bk-cover .bk-count { font-family: var(--font-ui); font-size: 12pt; color: #6d7079; margin: 0 0 8mm; }
.bk-cover .bk-rule { inline-size: 52mm; block-size: 1.2pt; background: #8a5a20; margin: 0 auto 8mm; }
.bk-cover .bk-src { font-size: 10.5pt; color: #4a4e57; line-height: 1.95; }
.bk-cover .bk-bottom {
  margin-block-start: auto; font-family: var(--font-ui);
  font-size: 10.5pt; color: #4a4e57; line-height: 2.1;
}
.bk-fill {
  display: inline-block; min-inline-size: 45mm;
  border-block-end: .5pt dotted #6d7079; color: transparent;
}

.bk-toc ol { list-style: none; margin: 0; padding: 0; font-size: 10.4pt; }
.bk-toc li {
  display: flex; gap: 2mm; align-items: baseline; padding: 1mm 0;
  border-block-end: .3pt dotted #ddd6c7;
}
.bk-toc .n { font-weight: 700; color: #8a5a20; min-inline-size: 8mm; font-family: var(--font-ui); font-size: 9.5pt; }
.bk-toc .t { flex: 1 1 auto; }
.bk-toc .p { font-family: var(--font-ui); font-size: 8.4pt; color: #6d7079; white-space: nowrap; }

.topic-index { column-count: 2; column-gap: 8mm; font-size: 9.8pt; }
.topic-index div { break-inside: avoid; padding: .7mm 0; line-height: 1.6; }
.topic-index b { font-weight: 600; }
.topic-index .ns { font-family: var(--font-ui); color: #8a5a20; font-size: 8.6pt; }
.topic-index .tsrc { font-family: var(--font-ui); font-size: 8.2pt; color: #6d7079; }
@media (max-width: 700px) { .topic-index { column-count: 1; } }

/* ---- review appendix --------------------------------------------------- */
.rv-part { break-inside: avoid; margin-block-end: 4mm; }
.rv-list { list-style: none; margin: 0; padding: 0; }
.rv-list li {
  display: flex; gap: 2mm; align-items: baseline; padding: .8mm 0;
  border-block-end: .3pt dotted #ddd6c7;
}
.rv-n { font-family: var(--font-ui); font-weight: 700; color: #8a5a20; min-inline-size: 8mm; font-size: 9.4pt; }
.rv-t { flex: 1 1 auto; }
.rv-t small { display: block; font-family: var(--font-ui); font-size: 8.2pt; color: #6d7079; }
.rv-p { font-family: var(--font-ui); font-size: 8.4pt; color: #6d7079; white-space: nowrap; }
.rv-block { break-inside: avoid; margin-block-end: 3mm; }
.rv-sum { margin: 0; padding-inline-start: 6mm; }
.rv-sum li { font-size: 10.4pt; line-height: 1.75; margin-block-end: .8mm; }
.rv-disc li { margin-block-end: 1.6mm; }
.gloss { margin: 0; }
.gterm { break-inside: avoid; padding: 1.2mm 0; border-block-end: .3pt solid #ece6d9; }
.gterm dt { font-weight: 700; display: inline; }
.gterm dt::after { content: ":"; margin-inline-end: .3em; }
.gterm dd { display: inline; margin: 0; }
.gsrc { font-family: var(--font-ui); font-size: 8.2pt; color: #6d7079; white-space: nowrap; }
.gsrc a { color: #8a5a20; }
.qn { display: inline-block; min-inline-size: 6mm; font-family: var(--font-ui); font-weight: 700; color: #8a5a20; }

/* ---- the cover form (screen only) -------------------------------------- */
.bk-form {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6); background: var(--surface);
  margin-block: var(--s-4) var(--s-6);
  font-family: var(--font-ui);
}
.bk-form h2 { font-family: var(--font-ui); font-size: var(--fs-md); margin-block-end: var(--s-1); }
.bk-form > p { font-size: var(--fs-xs); color: var(--ink-3); margin-block-end: var(--s-4); max-width: 66ch; line-height: 1.75; }
.bk-grid { display: grid; gap: var(--s-3) var(--s-4); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.bk-grid label { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--fs-2xs); color: var(--ink-3); }
.bk-grid input {
  min-height: 38px; padding: 0 var(--s-3); font-size: var(--fs-sm);
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.bk-grid input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.bk-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-block-start: var(--s-4); }

body.hide-answers .qwhy { display: none !important; }

/* =============================================================== PRINT */
@page { size: A4; margin: 16mm 15mm 18mm; }

@media print {
  html, body { background: #fff !important; }
  .hdr, .viewbar, .read-progress, .lec-nav, .page-head, .crumb, .bk-form, .bk-actions,
  .no-print, .toast, .sheet-wrap > .no-print { display: none !important; }

  /* the workspace disappears; only the paper prints */
  .sheet-wrap {
    display: block; background: none; padding: 0; border-radius: 0; gap: 0;
    --sheet-pad: 0;
  }
  .sheet {
    inline-size: auto; max-inline-size: none; margin: 0; padding: 0;
    border: 0; border-radius: 0; box-shadow: none;
    background: #fff; color: #000; font-size: 11pt;
  }
  .sheet + .sheet, .bk-section { break-before: page; page-break-before: always; }
  .bk-cover { break-after: page; page-break-after: always; }
  .page { padding: 0; max-width: none; }

  /* ink, not colour */
  .ho-head { border-block-end: 1.2pt solid #000; }
  .ho-head .ho-book b, .sheet h2.ho-h, .ho-obj h2,
  .bk-cover .bk-title, .bk-toc .n, .rv-n, .qn, .topic-index .ns { color: #000; }
  .sheet a { color: #000; text-decoration: none; }
  .sheet .srcq { background: #f4f4f4; border-inline-end-color: #777; }
  .ho-obj { background: #f7f7f7; border-color: #bbb; }
  .sheet .kbox { border-color: #999; background: #fff; }
  .sheet .kbox[data-kind="rule"], .sheet .kbox[data-kind="principle"],
  .sheet .kbox[data-kind="definition"], .sheet .kbox[data-kind="note"] { background: #f7f7f7; }
  .sheet .ktable th { background: #eee; }
  .sheet .ktable th, .sheet .ktable td { border-color: #999; }
  .sheet .kdiag .flow > span, .sheet .kdiag .hier-node,
  .sheet .term, .sheet .qitem { background: #f7f7f7; border-color: #bbb; }
  .sheet .kdiag .hier-root { background: #e4e4e4; border-color: #999; color: #000; }
  .bk-fill { border-block-end-color: #000; }

  /* the instructor's layer is not part of a student handout */
  .instr-only, .pnotes, .ocr-warn { display: none !important; }
  .qopts button { border-color: #999; background: #fff; }
  .ho-foot { border-block-start: .5pt solid #999; }
  .srcq .srcq-foot a::after { content: ''; }
}