/* ══════════════════════════════════════════════════════════════════════
 * משאבות צנטריפוגליות — המדריך ההנדסי המלא
 * book.css — master print stylesheet (A4 portrait, light "textbook" theme)
 * by Yehuda Buju · Water & Energy Engineering
 *
 * Identity: teal = water, gold = energy. Light cream/white pages, deep ink.
 * Flowing book model: chapters flow across pages; running footer carries
 * page number + author. Adapted from the proven chotam annual-report engine.
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Design tokens (LIGHT, print-first) ─────────────────────────────── */
.book-scope {
  --ink:        #1A2B33;   /* body text — deep teal-charcoal */
  --ink-soft:   #34454E;
  --muted:      #5B6770;
  --faint:      #8A949B;
  --line:       #E3E0D8;   /* warm hairline */
  --line-soft:  #EFEDE6;

  --paper:      #FFFFFF;
  --paper-warm: #FBFAF6;   /* boxed surfaces */
  --paper-warm2:#F6F4EC;

  --gold:       #C4941E;   /* primary accent (energy) — readable on white */
  --gold-deep:  #9A7212;
  --gold-tint:  #FBF4E2;
  --gold-line:  #EAD9A6;

  --teal:       #0F766E;   /* structural accent (water) */
  --teal-deep:  #0B5A54;
  --teal-tint:  #E6F2F0;
  --teal-line:  #BFE0DB;

  --green:      #047857;
  --green-tint: #ECFDF5;
  --amber:      #B45309;
  --amber-tint: #FFFBEB;
  --red:        #B91C1C;
  --red-tint:   #FEF2F2;
  --info:       #0E7490;
  --info-tint:  #ECFEFF;

  --font-body:  'Heebo', 'Assistant', -apple-system, 'Segoe UI', sans-serif;
  --font-disp:  'Frank Ruhl Libre', 'Heebo', Georgia, serif;  /* book-grade display serif */
  --font-num:   'Assistant', 'Heebo', sans-serif;             /* big numbers */
  --font-mono:  'JetBrains Mono', 'Consolas', monospace;      /* formulas, units */
}

/* ── Page geometry — flowing A4 book ────────────────────────────────── */
@page {
  size: A4;
  margin: 18mm 19mm 17mm 19mm;       /* top · right · bottom · left */
  @bottom-center {
    content: counter(page);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9pt;
    color: #5B6770;
  }
  @bottom-left {
    content: "משאבות צנטריפוגליות — המדריך ההנדסי המלא";
    font-family: 'Heebo', sans-serif;
    font-size: 7.5pt;
    color: #AEB5BB;
  }
  @bottom-right {
    content: "יהודה בוז'ו";
    font-family: 'Heebo', sans-serif;
    font-size: 7.5pt;
    color: #AEB5BB;
  }
}
/* Full-bleed pages (cover, part dividers) — no margins, no footer */
@page bleed {
  margin: 0;
  @bottom-center { content: ""; }
  @bottom-left   { content: ""; }
  @bottom-right  { content: ""; }
}

/* ── Base ───────────────────────────────────────────────────────────── */
.book {
  margin: 0;
  padding: 0;
  direction: rtl;
  text-align: right;
  font-family: var(--font-body);
  font-size: 10.8pt;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
}

/* LTR isolation for numbers, units, English terms, formulas, chart labels */
.ltr, .num, .en, .unit {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}
.en { font-family: var(--font-body); }
.he { direction: rtl; unicode-bidi: isolate; }
.mono { font-family: var(--font-mono); }

/* On-screen scaffold (the white "page" preview); print resets to flow */
.book {
  max-width: 820px;
  margin: 0 auto;
  background: var(--paper);
}
.screen-bg { background: #ECEAE3; padding: 24px 0; }

/* ── Typographic scale ──────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-disp); color: var(--ink); margin: 0; line-height: 1.2; }
/* Headings carry a transparent "strut" (::after) that extends their atomic
 * box downward: with break-inside:avoid, a heading that lacks that much
 * room at the bottom of a page jumps to the next page instead of opening
 * a section in the bottom band ("כותרת בסוף עמוד"). The negative bottom
 * margin gives the strut height back, so visual spacing is unchanged.
 * (.sec-h2's underline moves to the ::after top border for this.) */
.sec-h2 {
  font-family: var(--font-disp);
  font-size: 19pt;
  font-weight: 700;
  color: var(--teal-deep);
  margin: 26px 0 -86px;            /* 10px visual gap − 96px strut */
  break-after: avoid;
  break-inside: avoid;
}
.sec-h2::after {
  content: "";
  display: block;
  margin-top: 6px;
  border-top: 2px solid var(--teal-line);   /* the underline */
  height: 96px;                    /* ≥ ~4 body lines required below */
}
.sec-h3 {
  font-family: var(--font-num);
  font-size: 13.5pt;
  font-weight: 800;
  color: var(--ink);
  margin: 20px 0 -65px;            /* 7px visual gap − 72px strut */
  break-after: avoid;
  break-inside: avoid;
}
.sec-h3::after { content: ""; display: block; height: 72px; }
.sec-h4 {
  font-family: var(--font-num);
  font-size: 11.5pt;
  font-weight: 800;
  color: var(--teal-deep);
  margin: 15px 0 -55px;            /* 5px visual gap − 60px strut */
  break-after: avoid;
  break-inside: avoid;
}
.sec-h4::after { content: ""; display: block; height: 60px; }

/* A section may not open with only its intro while the body escapes to the
 * next page: the first paragraph after a heading is welded to whatever
 * follows it — if the body moves, the heading + intro move with it — and
 * may not itself split leaving fewer lines than the heading strut demands
 * (orphans 4/3 ≈ the strut's "≥4/3 lines below the heading" guarantee). */
.sec-h2 + p, .sec-h3 + p, .sec-h4 + p { break-after: avoid; widows: 3; }
.sec-h2 + p { orphans: 4; }
.sec-h3 + p, .sec-h4 + p { orphans: 3; }
/* Introducer paragraphs (ending with ":") announce the element after them —
 * never separate the two. Class injected by build.mjs. */
.keepnext { break-after: avoid; }
.eyebrow {
  font-family: var(--font-num);
  font-size: 8.5pt;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

p { margin: 0 0 9px; max-width: 64ch; }
p.lead {
  font-size: 12pt;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 62ch;
}
strong { color: var(--ink); font-weight: 700; }
.gold  { color: var(--gold-deep); }
.tealc { color: var(--teal-deep); }
a { color: var(--teal-deep); text-decoration: none; }

ul, ol { margin: 8px 28px 12px 0; padding: 0; }
li { margin-bottom: 5px; max-width: 62ch; }

/* small-caps style label */
.kicker {
  display: inline-block;
  font-family: var(--font-num);
  font-size: 8pt;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Chapter structure (flowing) ────────────────────────────────────── */
.chapter { break-before: page; }
.chapter:first-of-type { break-before: auto; }

.chapter-head {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--gold);
  position: relative;
  break-inside: avoid;
  break-after: avoid;
}
.chapter-kicker {
  font-family: var(--font-num);
  font-size: 9pt;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 6px;
}
.chapter-row { display: flex; align-items: baseline; gap: 16px; }
.chapter-num {
  font-family: var(--font-num);
  font-size: 46pt;
  font-weight: 800;
  color: var(--gold);
  line-height: 0.9;
}
.chapter-title {
  font-family: var(--font-disp);
  font-size: 26pt;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.chapter-en {
  font-family: var(--font-body);
  font-size: 11pt;
  font-weight: 500;
  color: var(--muted);
  margin-top: 7px;
  direction: ltr;
  text-align: right;
}

/* ── Part divider (full-bleed color page) ───────────────────────────── */
.part-divider {
  page: bleed;
  break-before: page;
  height: 297mm;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 38mm;
  color: #fff;
  background: linear-gradient(140deg, var(--teal-deep) 0%, var(--teal) 55%, #11857B 100%);
  position: relative;
  overflow: hidden;
}
.part-divider::after {
  content: "";
  position: absolute;
  left: -60mm; bottom: -60mm;
  width: 160mm; height: 160mm;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
}
.part-eyebrow {
  font-family: var(--font-num);
  font-size: 12pt;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: var(--gold);
  margin-bottom: 14px;
}
.part-roman {
  font-family: var(--font-disp);
  font-size: 120pt;
  font-weight: 900;
  line-height: 0.8;
  color: rgba(255,255,255,0.16);
  position: absolute;
  top: 24mm; left: 30mm;
}
.part-title {
  font-family: var(--font-disp);
  font-size: 40pt;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.part-en {
  font-size: 14pt;
  color: rgba(255,255,255,0.8);
  direction: ltr;
  text-align: right;
  margin-bottom: 22px;
}
.part-toc { position: relative; z-index: 1; max-width: 78%; }
.part-toc li {
  list-style: none;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  font-size: 11.5pt;
  display: flex; gap: 12px;
}
.part-toc li b { color: var(--gold); font-family: var(--font-num); min-width: 2.4em; }

/* ── Cover ──────────────────────────────────────────────────────────── */
.cover {
  page: bleed;
  height: 297mm;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #0B5A54 0%, #0F766E 40%, #134E4A 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
}

/* ── Utility: keep-together / spacing ───────────────────────────────── */
.avoid-break { break-inside: avoid; }
.spacer-s { height: 8px; } .spacer-m { height: 16px; } .spacer-l { height: 28px; }
.rule { height: 1px; background: var(--line); border: 0; margin: 16px 0; }
.center { text-align: center; }

/* ── Print resets ───────────────────────────────────────────────────── */
@media print {
  .no-print { display: none !important; }
  .screen-bg { background: #fff; padding: 0; }
  .book { max-width: 100%; margin: 0; }
  /* let prose flow; protect atomic blocks (defined in components.css) */
}


/* ══════════════════════════════════════════════════════════════════════
 * components.css — reusable book elements
 * callouts · formula boxes · worked examples · figures · helper tables ·
 * bilingual term-pairs · "in brief" · symbol key · KPI tiles · so-what
 * Pairs with book.css (light textbook theme, gold+teal identity).
 * ══════════════════════════════════════════════════════════════════════ */

/* ── "בקצרה" — chapter/section TL;DR ────────────────────────────────── */
.brief {
  break-inside: avoid;
  margin: 14px 0 20px;
  padding: 15px 18px 15px 18px;
  background: linear-gradient(180deg, var(--gold-tint) 0%, #FDF8EC 100%);
  border-right: 5px solid var(--gold);
  border-radius: 9px;
}
.brief-label {
  font-family: var(--font-num);
  font-size: 9pt;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 6px;
}
.brief p { margin: 0 0 6px; font-size: 10.6pt; }
.brief p:last-child { margin-bottom: 0; }
.brief strong { color: var(--gold-deep); }

/* ── Callouts — info / tip / warn / crit / ok ───────────────────────── */
.callout {
  break-inside: avoid;
  margin: 14px 0;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 10.4pt;
  line-height: 1.6;
  background: var(--paper-warm);
  border-right: 4px solid var(--faint);
  color: var(--ink-soft);
}
.callout .c-tag {
  display: block;
  font-family: var(--font-num);
  font-weight: 800;
  font-size: 9.5pt;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.callout p { margin: 0 0 6px; } .callout p:last-child { margin: 0; }
.callout ul { margin: 6px 22px 0 0; } .callout li { margin-bottom: 3px; }
.callout.info { background: var(--info-tint);  border-right-color: var(--info); }
.callout.info  .c-tag { color: var(--info); }
.callout.tip  { background: var(--teal-tint);  border-right-color: var(--teal); }
.callout.tip   .c-tag { color: var(--teal-deep); }
.callout.warn { background: var(--amber-tint); border-right-color: #F59E0B; }
.callout.warn  .c-tag { color: var(--amber); }
.callout.crit { background: var(--red-tint);   border-right-color: var(--red); }
.callout.crit  .c-tag { color: var(--red); }
.callout.ok   { background: var(--green-tint); border-right-color: #10B981; }
.callout.ok    .c-tag { color: var(--green); }
.callout strong { color: inherit; }

/* ── Formula box ────────────────────────────────────────────────────── */
.formula {
  break-inside: avoid;
  margin: 16px 0;
  padding: 16px 18px 14px;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal);
  border-radius: 10px;
  position: relative;
}
/* The label must live ENTIRELY inside the box's border box: Chromium
 * fragmentation repaints any ink that pokes above the fragment's top edge
 * onto the PREVIOUS page (verified for absolute AND relative offsets) —
 * a straddling pill strands alone at the bottom of the prior page when
 * the box opens a new page. So: an in-flow tab welded under the teal top
 * border (same color → reads as one piece), fully inside the box. */
.formula-label {
  width: fit-content;
  margin: -16px -2px 2px auto;   /* flush under the border · 16px optical inset from the right */
  background: var(--teal);
  color: #fff;
  font-family: var(--font-num);
  font-size: 8pt;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 12px 4px;
  border-radius: 0 0 9px 9px;    /* top corners welded to the border */
}
.formula .eq {
  direction: ltr;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13.5pt;
  color: var(--ink);
  margin: 8px 0;
  line-height: 1.5;
}
.formula .eq .big { font-size: 16pt; color: var(--teal-deep); font-weight: 600; }
.formula .where {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
  font-size: 9.6pt;
  color: var(--muted);
  line-height: 1.55;
}
.formula .where b { color: var(--ink); font-family: var(--font-mono); }
.formula .where .row { display: flex; gap: 8px; margin-bottom: 2px; }
.formula .where .sym { direction: ltr; min-width: 4.5em; color: var(--teal-deep); font-family: var(--font-mono); font-weight: 600; }

/* inline formula chip */
.fx { direction: ltr; unicode-bidi: isolate; font-family: var(--font-mono); font-size: 0.95em; color: var(--teal-deep); }

/* ── Worked example ─────────────────────────────────────────────────── */
.worked {
  break-inside: avoid;
  margin: 18px 0;
  border: 1px solid var(--teal-line);
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
}
.worked-head {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal));
  color: #fff;
  padding: 9px 16px;
  break-after: avoid;   /* if an oversized .worked must fragment, the head stays with body */
}
.worked-head .wx-icon {
  font-family: var(--font-num); font-weight: 800; font-size: 11pt;
  background: rgba(255,255,255,0.18); border-radius: 6px; padding: 1px 9px;
}
.worked-head .wx-title { font-family: var(--font-num); font-weight: 800; font-size: 11.5pt; }
.worked-body { padding: 14px 18px; font-size: 10.3pt; }
.worked-body p { margin: 0 0 8px; }
/* Page-scale worked examples (.worked--tall, tagged in chapter sources):
 * keeping these atomic strands a near-empty page before them — instead they
 * fragment BETWEEN steps; frame sides continue, head/given/steps/result
 * each stay whole. */
.worked--tall { break-inside: auto; }
.worked .wx-steps > li { break-inside: avoid; }
.wx-given {
  background: var(--paper-warm); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 14px; margin: 6px 0 12px;
  font-size: 10pt;
  break-inside: avoid;
}
.wx-given .gv { display: inline-block; margin: 0 0 4px 18px; }
.wx-given .gv b { color: var(--teal-deep); font-family: var(--font-mono); direction: ltr; }
.wx-steps { counter-reset: wx; margin: 0; padding: 0; list-style: none; }
.wx-steps > li {
  position: relative;
  margin: 0 0 11px 0;
  padding: 0 40px 0 0;
  min-height: 28px;
}
.wx-steps > li::before {
  counter-increment: wx;
  content: counter(wx);
  position: absolute; right: 0; top: 0;
  width: 26px; height: 26px;
  background: var(--gold); color: #fff;
  font-family: var(--font-num); font-weight: 800; font-size: 11pt;
  border-radius: 50%;
  display: grid; place-items: center;
}
.wx-steps .stp-eq {
  direction: ltr; text-align: left;
  font-family: var(--font-mono); font-size: 10.5pt;
  color: var(--ink); margin: 3px 0;
  background: var(--paper-warm2); padding: 5px 10px; border-radius: 6px;
  display: inline-block;
}
.wx-result {
  margin-top: 6px;
  background: var(--green-tint);
  border: 1px solid #A7F3D0;
  border-right: 4px solid var(--green);
  border-radius: 8px;
  padding: 11px 16px;
  font-size: 10.6pt;
  break-inside: avoid;
}
.wx-result .res-num { font-family: var(--font-num); font-weight: 800; font-size: 14pt; color: var(--green); direction: ltr; unicode-bidi: isolate; }
.wx-result.bad { background: var(--red-tint); border-color: #FECACA; border-right-color: var(--red); }
.wx-result.bad .res-num { color: var(--red); }

/* ── Figure + caption + source ──────────────────────────────────────── */
.figure {
  break-inside: avoid;
  margin: 18px 0;
  text-align: center;
}
.figure svg { max-width: 100%; height: auto; }
.figure .fig-frame {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 14px;
}
.fig-cap {
  margin-top: 8px;
  font-size: 9.6pt;
  color: var(--muted);
  line-height: 1.5;
  text-align: center;
}
.fig-cap b { color: var(--teal-deep); font-family: var(--font-num); font-weight: 800; }
.fig-source {
  margin-top: 3px;
  font-size: 8.2pt;
  font-style: italic;
  color: var(--faint);
}

/* ── Tables — data + helper ─────────────────────────────────────────── */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.8pt;
  margin: 14px 0;
  break-inside: auto;
}
.tbl caption {
  caption-side: top;
  text-align: right;
  font-family: var(--font-num);
  font-weight: 800;
  font-size: 10.5pt;
  color: var(--teal-deep);
  margin-bottom: 6px;
  break-after: avoid;   /* caption never strands from its table */
}
.tbl th, .tbl td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: middle; }
.tbl thead th {
  background: var(--teal-tint);
  color: var(--teal-deep);
  font-size: 8.8pt;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--teal);
}
.tbl thead { display: table-header-group; }
.tbl tbody tr:nth-child(even) { background: var(--paper-warm); }
.tbl td.num, .tbl th.num { direction: ltr; text-align: center; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.tbl tr { break-inside: avoid; }
.tbl.keep { break-inside: avoid; }       /* short reference tables stay whole */
.tbl .row-hi { background: var(--gold-tint) !important; }
.tbl .row-hi td { font-weight: 700; }

/* "helper" reference table (tool/lookup) gets a gold identity */
.htable thead th { background: var(--gold-tint); color: var(--gold-deep); border-bottom-color: var(--gold); }
.htable caption { color: var(--gold-deep); }

/* ── Bilingual term-pair (Hebrew ⟷ English) ─────────────────────────── */
.term {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
.term .he { font-weight: 700; color: var(--ink); }
.term .en {
  direction: ltr;
  font-size: 0.86em;
  color: var(--teal-deep);
  font-style: italic;
}
/* term box — a small glossary card inline in the margin of prose */
.termcard {
  break-inside: avoid;
  background: var(--teal-tint);
  border: 1px solid var(--teal-line);
  border-radius: 9px;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 9.8pt;
}
.termcard dt { font-family: var(--font-num); font-weight: 800; color: var(--teal-deep); }
.termcard dt .en { direction: ltr; font-style: italic; color: var(--muted); font-weight: 600; margin-right: 6px; }
.termcard dd { margin: 2px 0 8px; color: var(--ink-soft); line-height: 1.5; }
.termcard dd:last-child { margin-bottom: 0; }

/* ── KPI / number tiles ─────────────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0; break-inside: avoid; }
.tile {
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold);
  border-radius: 10px; padding: 13px 10px; text-align: center;
}
.tile .t-val { font-family: var(--font-num); font-weight: 800; font-size: 21pt; color: var(--ink); line-height: 1; direction: ltr; unicode-bidi: isolate; }
.tile .t-lbl { font-size: 8.8pt; color: var(--muted); font-weight: 700; margin-top: 5px; line-height: 1.3; }
.tile.teal { border-top-color: var(--teal); } .tile.teal .t-val { color: var(--teal-deep); }
.tile.green { border-top-color: #10B981; } .tile.green .t-val { color: var(--green); }
.tile.red { border-top-color: #EF4444; } .tile.red .t-val { color: var(--red); }

/* ── "אז מה?" — the takeaway ────────────────────────────────────────── */
.sowhat {
  break-inside: avoid;
  margin: 16px 0 4px;
  padding: 13px 18px;
  background: var(--gold-tint);
  border-right: 5px solid var(--gold);
  border-radius: 9px;
  font-size: 10.5pt;
  line-height: 1.6;
}
.sowhat .sw-tag { font-family: var(--font-num); font-weight: 800; color: var(--gold-deep); margin-left: 7px; }
.sowhat strong { color: var(--gold-deep); }

/* ── Symbol / notation key ──────────────────────────────────────────── */
.symkey { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 26px; margin: 12px 0; font-size: 9.8pt; }
.symkey .sk { display: flex; gap: 9px; padding: 4px 0; border-bottom: 1px dotted var(--line); break-inside: avoid; }
.symkey .sk .s { direction: ltr; font-family: var(--font-mono); font-weight: 600; color: var(--teal-deep); min-width: 3.6em; }
.symkey .sk .d { color: var(--ink-soft); }
.symkey .sk .u { color: var(--muted); direction: ltr; font-family: var(--font-mono); font-size: 0.9em; margin-right: auto; }

/* ── Two-column flow ────────────────────────────────────────────────── */
.twocol { column-count: 2; column-gap: 26px; }
.twocol > * { break-inside: avoid; }

/* ── Pros/cons grid (for pump-type pages) ───────────────────────────── */
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; break-inside: avoid; }
.pc { border-radius: 9px; padding: 11px 14px; font-size: 9.8pt; }
.pc.pros { background: var(--green-tint); border: 1px solid #A7F3D0; }
.pc.cons { background: var(--red-tint); border: 1px solid #FECACA; }
.pc h5 { font-family: var(--font-num); font-weight: 800; margin: 0 0 6px; font-size: 10.5pt; }
.pc.pros h5 { color: var(--green); } .pc.cons h5 { color: var(--red); }
.pc ul { margin: 0 18px 0 0; } .pc li { margin-bottom: 3px; }

/* ── Step / process row ─────────────────────────────────────────────── */
.steps { display: flex; flex-direction: column; gap: 9px; margin: 14px 0; }
.step {
  break-inside: avoid;
  display: flex; gap: 13px; align-items: flex-start;
  padding: 11px 15px; background: var(--paper-warm);
  border: 1px solid var(--line); border-right: 3px solid var(--teal);
  border-radius: 9px;
}
.step .s-n {
  font-family: var(--font-num); font-weight: 800; font-size: 14pt; color: #fff;
  background: var(--teal); width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%; display: grid; place-items: center; line-height: 1;
}
.step .s-b strong { display: block; color: var(--ink); font-size: 10.6pt; margin-bottom: 1px; }
.step .s-b span { font-size: 9.8pt; color: var(--muted); }

/* ── Front matter ───────────────────────────────────────────────────── */
.fm-page { break-before: page; }
.fm-pad { padding-top: 4mm; }

/* title page */
.titlepage { break-before: page; text-align: center; padding-top: 40mm; }
.titlepage .tp-mark { width: 72px; height: 72px; margin: 0 auto 18px; display: block; }
.titlepage .tp-kicker {
  font-family: var(--font-num); font-weight: 800; font-size: 11pt;
  letter-spacing: 0.22em; color: var(--gold-deep); text-transform: none; margin-bottom: 16px;
}
.titlepage h1 {
  font-family: var(--font-disp); font-weight: 900; font-size: 42pt; color: var(--ink);
  line-height: 1.08; margin: 0 0 10px; letter-spacing: -0.01em;
}
.titlepage .tp-sub { font-size: 14pt; color: var(--teal-deep); margin-bottom: 30px; font-weight: 500; }
.titlepage .tp-rule { width: 90px; height: 3px; background: var(--gold); margin: 0 auto 30px; border-radius: 2px; }
.titlepage .tp-author { font-family: var(--font-disp); font-weight: 700; font-size: 19pt; color: var(--ink); margin-bottom: 6px; }
.titlepage .tp-cred { font-size: 10.5pt; color: var(--muted); line-height: 1.6; }
.titlepage .tp-foot { margin-top: 46mm; font-size: 10pt; color: var(--faint); }

/* copyright / edition */
.copyr { break-before: page; padding-top: 30mm; font-size: 9.6pt; color: var(--muted); line-height: 1.7; }
.copyr p { max-width: 80ch; }
.copyr .cr-brand { font-family: var(--font-num); font-weight: 800; color: var(--ink); font-size: 11pt; }

/* foreword */
.foreword .fw-sign { margin-top: 18px; font-family: var(--font-disp); font-weight: 700; color: var(--teal-deep); font-size: 13pt; }
.foreword .fw-sign span { display: block; font-family: var(--font-body); font-weight: 400; font-size: 9.6pt; color: var(--muted); }

/* how to read — role cards */
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 16px 0; }
.role {
  break-inside: avoid;
  border: 1px solid var(--line); border-top: 4px solid var(--teal);
  border-radius: 11px; padding: 14px 16px; background: #fff;
}
.role.r-gold { border-top-color: var(--gold); }
.role h4 { font-family: var(--font-num); font-weight: 800; font-size: 12.5pt; color: var(--ink); margin: 0 0 2px; }
.role .r-who { font-size: 9pt; color: var(--gold-deep); font-weight: 700; margin-bottom: 7px; }
.role p { font-size: 9.8pt; color: var(--ink-soft); margin: 0 0 7px; }
.role .r-path { font-size: 9.4pt; color: var(--teal-deep); }
.role .r-path b { font-family: var(--font-mono); color: var(--gold-deep); direction: ltr; unicode-bidi: isolate; }

/* table of contents — part-grouped */
.toc { break-before: page; }
.toc-part { break-inside: avoid; margin: 0 0 14px; }
.toc-part-head {
  display: flex; align-items: baseline; gap: 10px;
  border-bottom: 2px solid var(--gold); padding-bottom: 4px; margin-bottom: 6px;
}
.toc-part-roman { font-family: var(--font-num); font-weight: 800; color: var(--gold-deep); font-size: 12pt; }
.toc-part-name { font-family: var(--font-disp); font-weight: 700; color: var(--teal-deep); font-size: 13.5pt; }
.toc-part-en { font-size: 9pt; color: var(--muted); direction: ltr; margin-right: auto; }
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list li { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: 10pt; break-inside: avoid; }
.toc-list .toc-n { font-family: var(--font-mono); font-weight: 600; color: var(--gold-deep); min-width: 2.2em; direction: ltr; }
.toc-list .toc-t { color: var(--ink-soft); flex: 0 1 auto; }
.toc-list .toc-dots { flex: 1 1 auto; border-bottom: 1px dotted var(--faint); position: relative; top: -3px; min-width: 10px; }
.toc-list .toc-p { font-family: var(--font-mono); font-size: 9pt; font-weight: 600; color: var(--gold-deep); direction: ltr; }
.toc-cols { column-count: 2; column-gap: 30px; }

/* list of figures */
.lof { break-before: page; }
.lof-list { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: 34px; }
.lof-list li { display: flex; align-items: baseline; gap: 7px; padding: 2.5px 0; font-size: 9pt; break-inside: avoid; }
.lof-list .lof-n { font-family: var(--font-mono); font-weight: 600; color: var(--gold-deep); white-space: nowrap; direction: ltr; }
.lof-list .lof-t { color: var(--ink-soft); flex: 0 1 auto; overflow: hidden; }
.lof-list .lof-p { font-family: var(--font-mono); font-size: 8.5pt; font-weight: 600; color: var(--gold-deep); direction: ltr; }

/* ── Formula sheet (appendix D) ──────────────────────────────────────── */
.fgrid { column-count: 2; column-gap: 22px; }
.fcard { break-inside: avoid; border: 1px solid var(--line); border-top: 3px solid var(--teal); border-radius: 9px; padding: 11px 14px; margin-bottom: 12px; background: #fff; }
.fcard .fc-t { font-family: var(--font-num); font-weight: 800; font-size: 10.5pt; color: var(--teal-deep); margin-bottom: 5px; }
.fcard .fc-eq { direction: ltr; text-align: left; font-family: var(--font-mono); font-size: 11pt; color: var(--ink); }
.fcard .fc-n { font-size: 8.6pt; color: var(--muted); margin-top: 4px; }

/* ── Checklists (appendix F) ─────────────────────────────────────────── */
.checklist { list-style: none; margin: 8px 0 18px; padding: 0; }
.checklist li { position: relative; padding: 6px 28px 6px 0; font-size: 10.2pt; border-bottom: 1px dotted var(--line); break-inside: avoid; }
.checklist li::before { content: ""; position: absolute; right: 2px; top: 8px; width: 13px; height: 13px; border: 1.5px solid var(--teal); border-radius: 3px; }
.checklist li b { color: var(--teal-deep); }

/* ── Glossary (appendix E) ───────────────────────────────────────────── */
.glos { column-count: 2; column-gap: 26px; }
.glos .gentry { break-inside: avoid; display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dotted var(--line); font-size: 9.8pt; }
.glos .gentry .he { font-weight: 700; color: var(--ink); }
.glos .gentry .en { direction: ltr; color: var(--teal-deep); font-style: italic; text-align: left; }

@media print {
  /* keep semantic tints in print */
  .brief, .callout, .formula, .worked, .figure .fig-frame, .tiles, .sowhat,
  .termcard, .pc, .step, .wx-result, .role, .fcard { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tbl tbody tr:nth-child(even) { background: var(--paper-warm) !important; }
}


/* ══ site-embed overrides (appended by build-book-chapters.mjs) ══ */
.book{max-width:100%;font-size:17px;line-height:1.78;background:transparent;padding:0}
.book svg{max-width:100%;height:auto}
.book .figure,.book .formula{overflow-x:auto}
.book table{max-width:100%}
.book .fig-cap,.book .fig-num{font-size:12.5px}
@media(max-width:700px){
  .book{font-size:16.5px}
  .book table{display:block;overflow-x:auto}
}