/* ============================================================
   AERL Documentation — Booklet (user manuals), Trace design
   ------------------------------------------------------------
   A4 saddle-stitched booklet: <body class="booklet">, then
   tokens.css + doc.css + booklet.css (+ an optional per-doc CSS
   with genuine per-doc overrides only). Contract and rollout
   checklist: DESIGN_NOTES.md § Booklet and brochure layouts.

   Page sequence (multiple of 4):
     1  front cover            article.page.cover   (doc.css § Trace covers)
     2  inside front cover     article.page.ifc     (contents + document)
     3… chapters               article.page[data-chapter][data-title]
                               <header class="opener"> starts a chapter
     …  pad pages              .page[data-title] with .record / .notes__lines
     n  back cover             article.page.back

   Trace inside the booklet: an orange rail runs down the outside
   margin of every interior page and turns into the folio. A chapter's
   number sits in a pad on the rail (stepping down the fore-edge by
   chapter, like a thumb tab); the chapter's first page wires the rail
   into a large pad holding the chapter number. Section headings are
   numbered automatically (6.1, 6.2 …) in a hanging column.

   Facing pages: odd pages are rectos (right), even pages versos.
   Margins mirror; rail, pads, running head and folio are on the
   outside edge. Folios and section numbers are CSS counters.

   Web output (html.web, set by ?web; scripts/docs.sh build): the same
   HTML as a single-sided A4 PDF. Every page is laid out as a recto
   (rail, pads, running head and folio on the right), and [data-pad]
   pages and contents entries (the Notes pages that only make the page
   count a multiple of 4) are hidden (doc.css § Web output). Parity
   selectors are written
     :nth-of-type(even):not(:where(html.web *))       verso, print only
     :is(:nth-of-type(odd), :where(html.web *))       recto, and every web page
   so web mode adds no specificity.
   ============================================================ */

body.booklet {
  --bk-in: 20mm;         /* gutter (inside) margin */
  --bk-out: 17mm;        /* outside margin (the rail lives in it) */
  --bk-top: 21mm;        /* top of text */
  --bk-bottom: 22mm;     /* bottom of text; the folio sits in this band */
  --hang: 14mm;          /* hanging column for section numbers */
  --rail: 7mm;           /* rail distance from the outside trim edge */
  --rail-w: 0.35mm;
  --or: var(--primary-500);
  --bk-charcoal: var(--sheet-charcoal);
  --bk-ink: var(--sheet-ink);

  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-1);
}
/* Tabular figures only where numbers stack in a column: the contents page
   numbers and the folio. In Inter, tnum also widens the hyphen and the minus
   (EG-600 reads "EG - 600", "Kakadu - 120 - 88.4"), and table cells here are
   labels and values read across, so they keep proportional figures. */
.booklet .toc__page, .booklet .pf__folio { font-variant-numeric: tabular-nums; }
body.booklet .sheet { counter-reset: folio chap sec; }

/* ---------- Page frame: mirrored margins ---------- */
.booklet .page {
  counter-increment: folio;
  --left: var(--bk-in);
  --right: var(--bk-out);
  padding: var(--bk-top) var(--right) var(--bk-bottom) var(--left);
  display: flex;
  flex-direction: column;
}
.booklet .sheet > .page:nth-of-type(even):not(:where(html.web *)) {   /* verso: outside edge is the left */
  --left: var(--bk-out);
  --right: var(--bk-in);
}
/* Web output: a page stands alone, so the text block is centred on it:
   18.5 mm each side of the content box, the same 173 mm measure as the
   booklet (20 + 17 mm), so nothing reflows between the files. The
   rail, pads and folio stay outside the block on the right; the hanging
   section-number column counts as part of the block, so headings' numbers
   align at the left margin as the rail sits beyond the right one. The
   running head and the folio line follow --left / --right. Print (booklet,
   press) keeps the 20 mm gutter. Covers and back covers set their own
   (doc.css, 16 mm). */
html.web .booklet .page { --left: calc((var(--bk-in) + var(--bk-out)) / 2); --right: calc((var(--bk-in) + var(--bk-out)) / 2); }
/* Chapter and section counters: each .opener starts a chapter, so a page
   that holds two or three short chapters numbers each one's sections from
   its own opener. counter-set, not counter-reset: a reset would open a new
   counter scope inside the page. */
.booklet .opener { counter-increment: chap; counter-set: sec 0; }

/* ---------- Rail: down the outside margin, turning into the folio ---------- */
.booklet .page:not(.cover):not(.back)::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--bleed));
  bottom: 12.5mm;
  right: calc(var(--rail) - var(--rail-w) / 2);
  width: 6mm;
  border-right: var(--rail-w) solid var(--or);
  border-bottom: var(--rail-w) solid var(--or);
  border-bottom-right-radius: 4mm;
}
.booklet .sheet > .page:nth-of-type(even):not(:where(html.web *)):not(.cover):not(.back)::before {
  right: auto;
  left: calc(var(--rail) - var(--rail-w) / 2);
  border-right: 0;
  border-left: var(--rail-w) solid var(--or);
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 4mm;
}

/* ---------- Running head (outside edge) ---------- */
.booklet .page[data-title]::after {
  content: attr(data-chapter) "\2003" attr(data-title);
  position: absolute;
  top: 10mm;
  right: var(--right);
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-3);
  white-space: pre;
}
.booklet .page:not([data-chapter])[data-title]::after { content: attr(data-title); }
.booklet .sheet > .page:nth-of-type(even):not(:where(html.web *))[data-title]::after { right: auto; left: var(--left); }
.booklet .page:has(.opener)::after { content: none; }

/* ---------- Folio, and the chapter pad on the rail ---------- */
.booklet .pf {
  position: absolute;
  left: var(--left);
  right: var(--right);
  bottom: 10mm;
  height: 12mm;                /* top edge = bottom of the text area (275 mm) */
  display: flex;
  align-items: flex-end;
  gap: 14px;
  font-size: 11px;
  color: var(--fg-3);
}
.booklet .pf__folio {
  font-family: var(--font-label);
  font-kerning: none; /* tracked mono: per-glyph placement otherwise extracts as "E N G I N E E R E D" */
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--fg-1);
  min-width: 18px;
}
.booklet .pf__folio::before { content: counter(folio); }
.booklet .pf__doc { flex: 1; }
.booklet .sheet > .page:is(:nth-of-type(odd), :where(html.web *)) .pf { flex-direction: row-reverse; }
.booklet .sheet > .page:is(:nth-of-type(odd), :where(html.web *)) .pf__folio,
.booklet .sheet > .page:is(:nth-of-type(odd), :where(html.web *)) .pf__doc { text-align: right; }
/* The pad: positioned from the folio box (its top is the 275 mm line). */
.booklet .page[data-chapter] .pf::before {
  content: var(--ch);
  position: absolute;
  top: calc(66mm + var(--tab, 0) * var(--tab-step) - 275mm);
  right: calc(var(--rail) - 4mm - var(--right));
  width: 8mm;
  height: 13mm;
  border: var(--rail-w) solid var(--or);
  border-radius: 2mm;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-label);
  font-kerning: none; /* tracked mono: per-glyph placement otherwise extracts as "E N G I N E E R E D" */
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-1);
}
.booklet .sheet > .page:nth-of-type(even):not(:where(html.web *))[data-chapter] .pf::before { right: auto; left: calc(var(--rail) - 4mm - var(--left)); }
.booklet .page:has(.opener) .pf::before { display: none; }
.booklet .page[data-chapter="01"] { --tab: 0; --ch: "01"; }
.booklet .page[data-chapter="02"] { --tab: 1; --ch: "02"; }
.booklet .page[data-chapter="03"] { --tab: 2; --ch: "03"; }
.booklet .page[data-chapter="04"] { --tab: 3; --ch: "04"; }
.booklet .page[data-chapter="05"] { --tab: 4; --ch: "05"; }
.booklet .page[data-chapter="06"] { --tab: 5; --ch: "06"; }
.booklet .page[data-chapter="07"] { --tab: 6; --ch: "07"; }
.booklet .page[data-chapter="08"] { --tab: 7; --ch: "08"; }
.booklet .page[data-chapter="09"] { --tab: 8; --ch: "09"; }
.booklet .page[data-chapter="10"] { --tab: 9; --ch: "10"; }
.booklet .page[data-chapter="11"] { --tab: 10; --ch: "11"; }
.booklet .page[data-chapter="12"] { --tab: 11; --ch: "12"; }
.booklet .page[data-chapter="13"] { --tab: 12; --ch: "13"; }
.booklet .page[data-chapter="14"] { --tab: 13; --ch: "14"; }
/* Pads step 17 mm down the fore-edge (66 mm + 17 mm per chapter); twelve
   chapters end at 266 mm, clear of the folio line (275 mm). A manual with a
   13th chapter steps 15 mm, so chapter 14's pad still ends at 274 mm. */
.booklet .sheet { --tab-step: 17mm; }
.booklet .sheet:has(> .page[data-chapter="13"]) { --tab-step: 15mm; }

/* ---------- Chapter opener: the rail wires into a large pad ----------
   <header class="opener">
     <span class="opener__num">06</span>
     <h2 class="opener__title">Installation <span class="opener__sub">Mounting, wiring …</span></h2>
   </header> */
.booklet .opener {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7mm;
  margin: 0 0 8mm;
  flex: 0 0 auto;
}
.booklet .opener__run { display: none; }          /* legacy markup from the band design */
.booklet .opener__row { display: contents; }
.booklet .opener__num {
  flex: 0 0 30mm;
  height: 26mm;
  border: 0.7mm solid var(--or);
  border-radius: 5mm;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-brand);
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--fg-1);
}
.booklet .opener__title {
  font-family: var(--font-brand);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--fg-1);
  margin: 0;
  padding: 0;
  border: 0;
  text-wrap: balance;
}
.booklet .opener__sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--fg-3);
  margin-top: 2.4mm;
}
/* branch from the rail to the pad, with a junction dot on the rail */
.booklet .opener::before, .booklet .opener::after { content: ""; position: absolute; background: var(--or); }
.booklet .opener::before { top: calc(13mm - 0.35mm); height: 0.7mm; }
.booklet .opener::after { top: calc(13mm - 1.2mm); width: 2.4mm; height: 2.4mm; border-radius: 50%; box-shadow: 0 0 0 1mm rgba(242,163,50,0.18); }
.booklet .sheet > .page:nth-of-type(even):not(:where(html.web *)) .opener::before { left: calc(var(--rail) - var(--left)); width: calc(var(--left) - var(--rail)); }
.booklet .sheet > .page:nth-of-type(even):not(:where(html.web *)) .opener::after { left: calc(var(--rail) - var(--left) - 1.2mm); }
.booklet .sheet > .page:is(:nth-of-type(odd), :where(html.web *)) .opener { flex-direction: row-reverse; text-align: right; }
.booklet .sheet > .page:is(:nth-of-type(odd), :where(html.web *)) .opener::before { right: calc(var(--rail) - var(--right)); width: calc(var(--right) - var(--rail)); }
.booklet .sheet > .page:is(:nth-of-type(odd), :where(html.web *)) .opener::after { right: calc(var(--rail) - var(--right) - 1.2mm); }

/* ---------- Hanging column: numbered section headings ---------- */
.booklet .page[data-chapter] > :not(.opener):not(.pf) { margin-left: var(--hang); }
.booklet .page[data-chapter] > table { width: calc(100% - var(--hang)) !important; }
.booklet .h3, .booklet h3.h3 {
  position: relative;
  font-family: var(--font-brand);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--fg-1);
  margin-top: 4.4mm;
  margin-bottom: 1.8mm;
}
.booklet .page[data-chapter] .h3,
.booklet .page[data-chapter] .spec-block__head { counter-increment: sec; }
.booklet .page[data-chapter] .h3::before,
.booklet .page[data-chapter] .spec-block__head::before,
.booklet .h3 .n {
  content: counter(chap) "." counter(sec);
  position: absolute;
  left: calc(-1 * var(--hang));
  top: 0.3em;
  font-family: var(--font-label);
  font-kerning: none; /* tracked mono: per-glyph placement otherwise extracts as "E N G I N E E R E D" */
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--fg-accent);
}
/* Docs that number their own headings (<span class="n">3.1</span>): no
   generated number. As specific as the rule above (page[data-chapter]) and
   later, so it wins; a lower-specificity version printed both numbers. */
.booklet .page[data-chapter] .h3:has(.n)::before,
.booklet .page[data-chapter] .spec-block__head:has(.n)::before { content: none; }
.booklet .h3--first, .booklet .page > .h3:first-child, .booklet .opener + .h3 { margin-top: 0; }
.booklet .h4--first, .booklet .page > .h4:first-child { margin-top: 0; }   /* a continuation page that opens on a sub-heading */
.booklet .h4, .booklet h4.h4 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-1);
  margin: 4mm 0 1.6mm;
}
.booklet .tt { font-size: 13px; font-weight: 700; color: var(--fg-accent); margin: 4mm 0 1.6mm; }
.booklet .tt--first { margin-top: 0; }
.booklet p { margin: 0 0 2.4mm; font-size: 13px; line-height: 1.55; color: var(--fg-2); }
.booklet p strong, .booklet li strong { color: var(--fg-1); font-weight: 600; }
.booklet ul, .booklet ol { margin: 0 0 3mm; padding-left: 5mm; }
.booklet li { font-size: 13px; line-height: 1.55; color: var(--fg-2); }
.booklet li + li { margin-top: 1mm; }
.booklet ul > li::marker { color: var(--or); }
.booklet ul.sq, .booklet ul.no { list-style: none; padding-left: 0; }
.booklet ul.sq li, .booklet ul.no li { position: relative; padding-left: 5mm; }
.booklet ul.sq li::before { content: ""; position: absolute; left: 0.4mm; top: 0.62em; width: 1.6mm; height: 1.6mm; border-radius: 0.4mm; background: var(--or); }
.booklet ul.no li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 2.6mm; height: 0.5mm; background: var(--status-danger); }
.booklet ol.plain li::marker { font-family: var(--font-brand); font-weight: 700; color: var(--fg-accent); }
.booklet a { color: var(--fg-accent); border: 0; }
.booklet .lead { font-size: 15px; line-height: 1.55; color: var(--fg-1); }
.booklet .fineprint { font-size: 13px; color: var(--fg-3); }
.booklet .chip {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--fg-1); padding: 0.1em 0.5em; border: 0.3mm solid var(--gray-300); border-radius: 1.4mm; background: transparent;
}

/* ---------- Front cover (layout: doc.css § Trace covers) ---------- */
.booklet .cover__model {
  font-family: var(--font-brand);
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--or);
}
.booklet .cover__docname {
  text-align: right;
  font-family: var(--font-label);
  font-kerning: none; /* tracked mono: per-glyph placement otherwise extracts as "E N G I N E E R E D" */
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sheet-muted);
}
.booklet .cover__docname strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--white);
  margin-bottom: 1mm;
}

/* ---------- Inside front cover: contents + document ---------- */
.ifc__title {
  font-family: var(--font-brand);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 2mm 0 7mm;
  padding: 0;
  border: 0;
}
.booklet .toc { display: block; margin-bottom: 9mm; }
.booklet .toc__entry {
  display: grid;
  grid-template-columns: 14mm 1fr auto;
  align-items: center;
  gap: 0 5mm;
  padding: 2.2mm 0;
  border-bottom: 1px solid var(--border-subtle);
}
.booklet .toc__num {
  height: 9mm;
  border: 0.5mm solid var(--or);
  border-radius: 2mm;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-brand);
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-1);
}
/* An entry with no chapter number (Notes, Installation record, an
   unnumbered section) keeps the column, without an empty box. */
.booklet .toc .toc__num:empty { border: 0; }
/* Entries may be links to their target (<a class="toc__entry" href="#id">,
   checked by overflow-check.js): no link styling. */
.booklet a.toc__entry, .booklet .toc__entry a { color: inherit; text-decoration: none; }
/* doc.css's print rule for links (a { color; border-bottom: 0 } !important)
   would recolour a linked entry and drop its rule line in the PDF: keep
   both, so a linked entry prints exactly as an unlinked one. */
@media print {
  .booklet a.toc__entry { color: inherit !important; border-bottom: 1px solid var(--border-subtle) !important; }
}
.booklet .toc__name { font-size: 16px; font-weight: 600; color: var(--fg-1); }
.booklet .toc__name small { display: block; font-size: 13px; font-weight: 400; color: var(--fg-3); margin-top: 1px; }
.booklet .toc__page { font-family: var(--font-brand); font-size: 15px; font-weight: 700; color: var(--fg-1); }
.booklet .toc__entry--h1 .toc__name { font-size: 16px; }
/* A section listed under its chapter: no number pad, lighter and smaller. */
.booklet .toc .toc__entry--sub .toc__num { height: 0; border: 0; }
.booklet .toc .toc__entry--sub .toc__name { font-size: 13px; font-weight: 500; }
.booklet .toc .toc__entry--sub .toc__page { font-size: 13px; font-weight: 600; }
/* Long manuals (twelve or more entries): tighter entries. */
.booklet .toc--compact .toc__entry { padding: 1.3mm 0; }
.booklet .toc--compact .toc__num { height: 8mm; }
.booklet .toc--compact .toc__name { line-height: 1.25; }
.booklet .toc--compact .toc__name small { line-height: 1.3; }
.booklet .docmeta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5mm 6mm;
  padding-top: 5mm;
  border-top: 1px solid var(--border-subtle);
}
.booklet .docmeta__cell { display: flex; flex-direction: column; gap: 1px; }
.booklet .docmeta__k { font-size: 11px; color: var(--fg-3); }
.booklet .docmeta__v { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.booklet .ifc__label { font-family: var(--font-brand); font-size: 15px; font-weight: 700; margin: 0 0 3mm; }

/* ---------- Back cover: doc.css § Trace covers (shared with folded brochures) ---------- */

/* ---------- Pad pages: installation record, notes ----------
   Notes pages that only make the count a multiple of 4 carry data-pad (as
   does their contents entry): the web output leaves them out. An
   installation record is content and stays. */
.booklet .pad__title {
  font-family: var(--font-brand);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 2mm 0 3mm;
  padding: 0;
  border: 0;
}
.booklet .pad__intro { margin-bottom: 6mm; }
.booklet .record { width: 100%; border-collapse: collapse; margin: 0 0 6mm; background: transparent; }
.booklet .record th,
.booklet .record td {
  border: 0;
  border-bottom: 1px solid var(--gray-300);
  padding: 0 0 1.6mm;
  height: 10.5mm;
  vertical-align: bottom;
  background: transparent !important;
  font-size: 13px;
}
.booklet .record th { width: 52mm; font-weight: 600; color: var(--fg-1); text-transform: none; letter-spacing: 0; text-align: left; }
.booklet .record td { color: var(--fg-2); }
.booklet .record caption {
  caption-side: top; text-align: left;
  font-family: var(--font-brand); font-size: 15px; font-weight: 700; color: var(--fg-1);
  padding: 2mm 0 0;
}
.booklet .box { display: inline-block; width: 3.4mm; height: 3.4mm; border: 1.2px solid var(--gray-600); border-radius: 0.8mm; margin: 0 1.6mm -0.4mm 0; }
.booklet .record .opt + .opt { margin-left: 6mm; }
.booklet .notes__lines {
  flex: 1;
  margin-top: 2mm;
  /* Rules every 9 mm, drawn as one vector image (not a repeating gradient:
     Chrome tiles a gradient and the tiles drift, so the pitch changed part
     way down the page). viewBox units are mm vertically and the image is
     stretched only horizontally, so the pitch is exact; 30 rules cover any
     page and the box clips the rest. Colour: --gray-300. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 270' preserveAspectRatio='none'%3E%3Cpath d='M0 8.87H1M0 17.87H1M0 26.87H1M0 35.87H1M0 44.87H1M0 53.87H1M0 62.87H1M0 71.87H1M0 80.87H1M0 89.87H1M0 98.87H1M0 107.87H1M0 116.87H1M0 125.87H1M0 134.87H1M0 143.87H1M0 152.87H1M0 161.87H1M0 170.87H1M0 179.87H1M0 188.87H1M0 197.87H1M0 206.87H1M0 215.87H1M0 224.87H1M0 233.87H1M0 242.87H1M0 251.87H1M0 260.87H1M0 269.87H1' stroke='%23BFBFBF' stroke-width='0.26' fill='none'/%3E%3C/svg%3E") 0 0 / 100% 270mm no-repeat;
}

/* ============================================================
   Interior components (Trace: outlines and rules, light on ink)
   ============================================================ */
/* Symbols legend */
.booklet .legend { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; margin: 2mm 0 4mm; border: 0; }
.booklet .legend__item { display: flex; gap: 3.5mm; align-items: flex-start; padding: 3.5mm 4mm; border: 0.3mm solid var(--gray-300); border-radius: 3mm; background: transparent; }
.booklet .legend__icon { flex: 0 0 8mm; height: 8mm; display: flex; align-items: center; justify-content: center; background: transparent; }
.booklet .legend__icon img { width: 7mm; height: 7mm; }
.booklet .legend__body h4 { margin: 0 0 1mm; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--fg-1); }
.booklet .legend__body p { margin: 0; }

/* Callouts: rounded outline in the status colour */
.booklet .callout {
  display: flex;
  gap: 3.5mm;
  align-items: flex-start;
  margin: 3mm 0;
  padding: 2.8mm 4mm;
  border: 0.35mm solid var(--gray-600);
  border-radius: 3mm;
  background: transparent;
  box-shadow: none;
}
.booklet .callout__icon { flex: 0 0 5.5mm; height: 5.5mm; display: flex; align-items: center; justify-content: center; }
.booklet .callout__icon img { width: 5.5mm; height: 5.5mm; }
.booklet .callout__body { min-width: 0; }
.booklet .callout__label { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--fg-1); margin-bottom: 0.5mm; }
.booklet .callout__body p { margin: 0; color: var(--fg-1); }
.booklet .callout__body p + p { margin-top: 1.4mm; }
.booklet .callout__body ul, .booklet .callout__body ol { margin: 1mm 0 0; }
.booklet :is(.callout--important, .callout--tip) { border-color: var(--status-info); }
.booklet :is(.callout--important, .callout--tip) .callout__label { color: var(--status-info); }
.booklet :is(.callout--caution, .callout--danger) { border-color: var(--status-danger); }
.booklet :is(.callout--caution, .callout--danger) .callout__label { color: var(--status-danger); }
.booklet .callout--warn { border-color: var(--primary-600); }
.booklet .callout--warn .callout__label { color: var(--fg-accent); }
.booklet .callout--note { border-color: var(--gray-500); }

/* Disclaimer */
.booklet .disclaimer { background: var(--gray-50); border: 0; border-radius: 3mm; padding: 4mm 5mm; margin: 2mm 0 3mm; }
.booklet .disclaimer p { margin: 0 0 1.6mm; font-family: var(--font-sans); font-size: 13px; text-transform: none; letter-spacing: 0; }
.booklet .disclaimer p:last-child { margin: 0; }

/* Schedule tables: header labels over a heavy rule, hairline rows */
.booklet :is(table.spec-table, table.led-table, table.code-table, table.soctab) {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4mm 0 4mm;
  background: transparent;
  border: 0;
}
.booklet :is(table.spec-table, table.led-table, table.code-table) th {
  background: transparent;
  color: var(--fg-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  padding: 0 3mm 1.4mm 0;
  border-bottom: 0.5mm solid var(--bk-ink);
  vertical-align: bottom;
}
.booklet :is(table.spec-table, table.led-table, table.code-table, table.soctab) td {
  padding: 1.8mm 3mm 1.8mm 0;
  border-bottom: 0.2mm solid var(--gray-300);
  vertical-align: top;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-1);
  background: transparent !important;
}
.booklet table.spec-table td:first-child { color: var(--fg-2); font-weight: 400; }
.booklet table.spec-table td:not(:first-child) { font-weight: 600; }
.booklet table.spec-table :is(td, th):last-child { padding-right: 0; }
.booklet table.spec-table th:last-child { white-space: nowrap; }
.booklet table.spec-table :is(td.m, td.v) { font-family: var(--font-sans); font-size: 13px; }
.booklet table.spec-table--dense td { padding-top: 1.2mm; padding-bottom: 1.2mm; }
.booklet table.spec-table--xdense td { padding-top: 0.8mm; padding-bottom: 0.8mm; line-height: 1.35; }
.booklet table.spec-table--kv td:first-child { width: 52%; }
.booklet table.spec-table--gloss td:first-child { width: 22%; font-weight: 600; color: var(--fg-1); }
.booklet table.soctab td:first-child { width: 45mm; }
.booklet table.soctab td.v { font-weight: 600; }
/* Fault / warning code tables (SRX, CoolPro): fixed columns, wrap long words */
.booklet table.code-table { table-layout: fixed; }
.booklet table.code-table td { font-size: 12px; overflow-wrap: anywhere; }
.booklet table.code-table .col-code { width: 15mm; }
.booklet table.code-table .col-led { width: 24mm; }
.booklet table.code-table .col-name { width: 32mm; }
.booklet table.code-table .col-action { width: 44mm; }
.booklet table.code-table td.code, .booklet table.code-table td.name { font-weight: 700; }
.booklet table.code-table :is(td.desc, td.action, td.led) { color: var(--fg-2); }

.booklet .spec-block + .spec-block { margin-top: 1mm; }
.booklet .spec-block__head {
  position: relative;
  display: block;
  font-family: var(--font-brand);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-1);
  margin: 3mm 0 1mm;
  padding: 0;
  border: 0;
}
.booklet .col2 .spec-block__head::before { position: static; margin-right: 2.4mm; }   /* inside a grid: number inline */
.booklet .spec-block__head small { font-family: var(--font-sans); font-size: 12px; font-weight: 400; color: var(--fg-3); }
.booklet .col2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2mm 7mm; }
.booklet .col2--panel { grid-template-columns: 78mm 1fr; }

/* Compatibility lists */
.booklet .compat { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; margin: 1.6mm 0 3mm; }
.booklet .compat__col { border: 0.35mm solid var(--status-ok); border-radius: 3mm; padding: 2.4mm 3.6mm; background: transparent; }
.booklet .compat__col--no { border-color: var(--status-danger); }
.booklet .compat__col h4 { margin: 0 0 1.4mm; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.booklet .compat__col--ok h4 { color: var(--status-ok); }
.booklet .compat__col--no h4 { color: var(--status-danger); }
.booklet .compat__col ul { list-style: none; margin: 0; padding: 0; }
.booklet .compat__col li { display: flex; gap: 2.4mm; align-items: baseline; font-size: 13px; color: var(--fg-1); padding: 0.4mm 0; margin: 0; border: 0; }
.booklet .compat__col li::before { content: ""; flex: 0 0 1.8mm; height: 1.8mm; border-radius: 50%; transform: translateY(-0.3mm); }
.booklet .compat__col--ok li::before { background: var(--status-ok); }
.booklet .compat__col--no li::before { background: var(--status-danger); }
.booklet .compat__col p { margin: 0; }

/* Figures */
.booklet .figure { margin: 3mm 0 4mm; padding: 0; background: transparent; border: 0; display: flex; flex-direction: column; align-items: center; gap: 2mm; }
.booklet .figure img, .booklet .figure svg.fig { max-width: 100%; height: auto; display: block; border-radius: 0; background: transparent; }
.booklet .figure--framed img { border: 0.3mm solid var(--gray-300); border-radius: 3mm; }
.booklet .figure--tight img { max-height: 64mm; object-fit: contain; }
.booklet .figure--xtight img { max-height: 48mm; object-fit: contain; }
.booklet .figure--wide img { width: auto; max-height: 95mm; }
.booklet .figure--portrait img { width: auto; max-height: 53mm; }
.booklet .figure--flush img { width: 100%; border-radius: 3mm; }
.booklet .figure figcaption {
  align-self: stretch;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-3);
  text-align: left;
  padding: 0;
}
.booklet .figure figcaption b { color: var(--fg-1); font-weight: 600; margin-right: 2mm; }   /* "Figure 5.3" label */
.booklet .figure-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; margin: 3mm 0 4mm; }
.booklet .figure-pair .figure { margin: 0; }
.booklet .split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 6mm; align-items: start; margin: 2mm 0 3mm; }
.booklet .split .figure { margin: 0; }
.booklet .photo-panel img { border-radius: 3mm; }

/* Terminal lists and maps */
.booklet .terminal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7mm; align-items: start; }
.booklet .terminals h4 { margin: 0 0 1.4mm; font-family: var(--font-brand); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--fg-1); }
.booklet :is(.terminals__list, .terminal-map) { list-style: none; margin: 0 0 3mm; padding: 0; border-top: 0.5mm solid var(--bk-ink); }
.booklet .terminal-map { display: grid; grid-template-columns: 1fr 1fr; gap: 0 7mm; }
.booklet :is(.terminals__list, .terminal-map) li {
  display: grid; grid-template-columns: 25mm 1fr; gap: 3mm;
  padding: 1.8mm 0; margin: 0;
  border-bottom: 0.2mm solid var(--gray-300);
  font-size: 13px;
}
.booklet .t__label { font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--fg-1); }
.booklet .t__label svg { width: 3.4mm; height: 3.4mm; vertical-align: -0.5mm; }
.booklet .t__desc { color: var(--fg-2); }
.booklet .pinout-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; margin: 2mm 0 3mm; }
.booklet .pinout-pair table.spec-table { margin: 1mm 0 0; }

/* Option cards (sensitivity, modes) and profile cards: rounded pads */
.booklet .sens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; margin: 2mm 0 4mm; border: 0; }
.booklet .sens__cell {
  display: flex; flex-direction: column; gap: 0.4mm;
  padding: 3.2mm 4mm;
  border: 0.35mm solid var(--gray-400);
  border-radius: 4mm;
  background: transparent;
}
.booklet .sens__name { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-2); }
.booklet .sens__value { font-family: var(--font-brand); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg-1); }
.booklet .sens__hint { font-size: 12px; color: var(--fg-3); }
.booklet .sens__cell--default { border: 0.8mm solid var(--or); background: transparent; }
.booklet .sens__cell--default .sens__name, .booklet .sens__cell--default .sens__value { color: var(--fg-1); }
.booklet .sens__cell--default .sens__hint { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--fg-accent); }
.booklet .profile-card { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3mm; margin: 2mm 0 4mm; border: 0; }
.booklet .profile-card__cell { display: flex; flex-direction: column; gap: 0.4mm; padding: 2.6mm 4mm; border: 0.35mm solid var(--gray-400); border-radius: 3mm; }
.booklet .profile-card__cell--accent { border: 0.8mm solid var(--or); background: transparent; }
.booklet .profile-card__k { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.booklet .profile-card__v { font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--fg-1) !important; }
.booklet .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; margin: 3mm 0 4mm; border: 0; }
.booklet .stats > div { padding: 3mm 4mm; border: 0.35mm solid var(--gray-400); border-radius: 3mm; }
.booklet .stats b { display: block; font-family: var(--font-brand); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg-1); line-height: 1.1; margin-bottom: 1mm; }
.booklet .stats span { font-family: var(--font-sans); font-size: 12px; line-height: 1.35; letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.booklet .tools { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3mm; margin: 2mm 0 4mm; }
.booklet .tools > div { border: 0.35mm solid var(--gray-300); border-radius: 3mm; padding: 3mm 2mm 2mm; text-align: center; font-family: var(--font-sans); font-size: 11px; line-height: 1.35; color: var(--fg-2); background: transparent; }
.booklet .tools :is(img, svg) { display: block; height: 14mm; width: auto; max-width: 100%; margin: 0 auto 2mm; object-fit: contain; }
.booklet .feature-list { list-style: none; margin: 2mm 0 3mm; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1mm 6mm; }
.booklet .feature-list li { display: flex; align-items: baseline; gap: 2.4mm; font-size: 13px; color: var(--fg-1); margin: 0; }
.booklet .feature-list li::before { content: ""; flex: 0 0 1.6mm; height: 1.6mm; border-radius: 0.4mm; background: var(--or); transform: translateY(-0.3mm); }

/* LEDs */
.booklet table.led-table td:first-child { font-weight: 600; width: 34%; }
.booklet .led-cell { display: inline-flex; align-items: center; gap: 1.6mm; font-family: var(--font-sans); font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--fg-2); }
.booklet .led-dot { display: inline-block; width: 2.6mm; height: 2.6mm; flex: 0 0 2.6mm; border-radius: 50%; background: var(--gray-100); border: 1px solid var(--gray-300); box-shadow: none; }
.booklet :is(.led-dot--on-green, .led-dot--green) { background: #34c759; border-color: #2ba14a; }
.booklet :is(.led-dot--on-red, .led-dot--red) { background: #e5484d; border-color: #b8333a; }
.booklet :is(.led-dot--on-amber, .led-dot--orange) { background: var(--or); border-color: var(--primary-600); }
.booklet .led-dot--blue { background: #1e90ff; border-color: #1670c9; }
.booklet .led-dot--flash { background-image: repeating-linear-gradient(45deg, currentColor 0 2px, rgba(255,255,255,0.7) 2px 4px); }
.booklet .led-dot--flash.led-dot--green { color: #34c759; } .booklet .led-dot--flash.led-dot--red { color: #e5484d; }
.booklet .led-dot--flash.led-dot--orange { color: var(--or); } .booklet .led-dot--flash.led-dot--blue { color: #1e90ff; }
.booklet .led-dot--flash-green { background: repeating-linear-gradient(45deg, #34c759 0 2px, #b8eecb 2px 4px); border-color: #2ba14a; }
.booklet .led-dot--flash-red   { background: repeating-linear-gradient(45deg, #e5484d 0 2px, #f8c8ca 2px 4px); border-color: #b8333a; }
.booklet .led-dot--flash-amber { background: repeating-linear-gradient(45deg, var(--or) 0 2px, var(--primary-100) 2px 4px); border-color: var(--primary-600); }
.booklet .led-dot--pulse-amber { background: repeating-linear-gradient(90deg, var(--or) 0 3px, var(--primary-100) 3px 6px); border-color: var(--primary-600); }
.booklet .led-note { margin: 0 0 3mm; padding: 2.4mm 4mm; font-size: 13px; color: var(--fg-2); background: var(--gray-50); border: 0; border-radius: 3mm; }
.booklet .led-states { display: grid; grid-template-columns: 26mm repeat(4, 1fr); margin: 2mm 0 4mm; border-top: 0.5mm solid var(--bk-ink); font-size: 12px; }
.booklet :is(.led-states__hdr, .led-states__cell) { padding: 1.6mm 2mm; border-bottom: 0.2mm solid var(--gray-300); display: flex; align-items: center; gap: 1.6mm; }
.booklet .led-states__hdr { background: transparent; color: var(--fg-3); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; justify-content: flex-start; border-bottom: 0.5mm solid var(--bk-ink); }
.booklet .led-states__row-lbl { font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--fg-1); background: transparent; }
.booklet .led-states__cell--n-a { color: var(--fg-3); font-style: italic; }
.booklet .led-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; margin: 2mm 0 2mm; }
.booklet .led-strip__cell { display: flex; flex-direction: column; align-items: center; gap: 1.4mm; padding: 2.4mm 2mm; border: 0.35mm solid var(--gray-300); border-radius: 3mm; background: transparent; }
.booklet .led-strip__cell img { width: 100%; max-width: 32mm; height: auto; }
.booklet .led-strip__cell figcaption { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--fg-3); text-align: center; }

/* Procedures: numbered steps in rounded pads */
.booklet .procedure { list-style: none; counter-reset: step; margin: 2mm 0 4mm; padding: 0; }
.booklet .procedure > li {
  counter-increment: step;
  position: relative;
  padding: 2.2mm 0 2.2mm 11mm;
  margin: 0;
  border: 0;
  border-bottom: 0.2mm solid var(--gray-300);
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  color: var(--fg-1);
  min-height: 10.5mm;
}
.booklet .procedure > li:first-child { border-top: 0.2mm solid var(--gray-300); }
.booklet .procedure > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 2mm;
  width: 7mm;
  height: 6.5mm;
  border: 0.5mm solid var(--or);
  border-radius: 2mm;
  background: transparent;
  color: var(--fg-1);
  font-family: var(--font-brand);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.booklet .procedure .substeps { list-style: lower-alpha; margin: 1.2mm 0 0; padding-left: 5mm; }
.booklet .procedure .substeps li { font-size: 13px; color: var(--fg-2); margin-top: 0.6mm; }
/* Long-form steps (Kakadu): .step > .step__num + .step__body > .step__title */
.booklet .step { display: grid; grid-template-columns: 13mm 1fr; border-top: 0.2mm solid var(--gray-300); padding-top: 3.5mm; margin-top: 3mm; }
.booklet .step--first { border-top: 0; padding-top: 0; margin-top: 1mm; }
.booklet .step__num {
  width: 9mm; height: 8.5mm; border: 0.5mm solid var(--or); border-radius: 2.4mm; background: transparent;
  color: var(--fg-1); font-family: var(--font-brand); font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.booklet .step__body { min-width: 0; }
.booklet .step__title { font-family: var(--font-brand); font-size: 16px; font-weight: 700; margin: 0.6mm 0 1.6mm; color: var(--fg-1); letter-spacing: -0.01em; }
.booklet .step__body .figure { margin-left: -13mm; }

/* Contact block */
.booklet .contact { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; margin: 1mm 0 3mm; padding: 0; background: transparent; border: 0; border-radius: 0; }
.booklet .contact h4 { margin: 0 0 1.4mm; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--fg-1); }
.booklet .contact p { margin: 0 0 0.6mm; }

.booklet .lede-quote { border-left: 0.5mm solid var(--or); padding: 1mm 0 1mm 4mm; margin: 3mm 0 4mm; font-size: 15px; color: var(--fg-1); background: transparent; }

/* In print, keep only the sheets. */
@media print {
  .booklet .no-print, .booklet #tweaks-root, .booklet tweaks-panel { display: none !important; }
}