/* ============================================================
   AERL Documentation — Brochure (datasheets), Trace design
   ------------------------------------------------------------
   <body class="brochure">, then tokens.css + doc.css + brochure.css.
   Page 1: the Trace cover (doc.css § Trace covers) with the datasheet
   line: the test pulse, a ring down the right, and four key-figure
   pads wired in series across the bottom (.cover__band > .keyfigs).
   Page 2: a white, office-printable spec sheet with the rail down the
   outside edge. Contract and rollout checklist: DESIGN_NOTES.md
   § Booklet and brochure layouts.

   A folded brochure (LiFe²: cover | verso | recto | back cover) marks
   its left-hand page .specsheet--verso and ends on the shared back
   cover (doc.css). Its web output (html.web, ?web) lays the verso out
   as a recto, like every page of a booklet's web output.
   ============================================================ */

body.brochure {
  --or: var(--primary-500);
  --rail: 7mm;
  --rail-w: 0.35mm;
  font-family: var(--font-sans);
  color: var(--fg-1);
}

/* ---------- Page 1: cover ---------- */
.brochure .cover__ground {
  background: var(--trace-datasheet) calc(var(--bleed) - 5mm) calc(var(--bleed) - 5mm) / 220mm 307mm no-repeat,
              var(--trace-bloom) no-repeat,
              radial-gradient(ellipse 44% 26% at 52% 52%, #2a2f37 0%, rgba(16,18,22,0) 100%) no-repeat,
              var(--sheet-charcoal);
}
.brochure .cover__title { font-size: 92px; letter-spacing: -0.05em; line-height: 0.9; margin-top: 6mm; }
.brochure .cover__subtitle { font-size: 18px; margin-top: 3mm; }
.brochure .cover__photo { left: 33mm; top: 96mm; width: 144mm; }
.brochure .cover__band { left: 34mm; right: 25mm; top: 222mm; display: block; }
/* "Powered by" line (cell maker); each doc places it */
.brochure .cover__powered { margin: 0; font-family: var(--font-brand); font-size: 13px; font-weight: 500; color: var(--sheet-muted); }
.brochure .cover__powered strong { color: var(--white); font-weight: 600; }

/* Key figures: pads on the line */
.keyfigs { display: grid; grid-template-columns: repeat(4, 34mm); gap: 5mm; }
.keyfig {
  height: 34mm;
  padding: 3.6mm 3.4mm 3mm;
  border: 0.8mm solid var(--or);
  border-radius: 5mm;
  background: var(--sheet-charcoal);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.keyfig__val {
  display: block;
  font-family: var(--font-brand);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--white);
}
.keyfig__val small { font-family: var(--font-brand); font-size: 13px; font-weight: 500; letter-spacing: 0; color: inherit; margin-left: 0.8mm; }
.keyfig__lbl { display: block; font-size: 12px; line-height: 1.3; color: var(--gray-200); }

/* ---------- Page 2: spec sheet ---------- */
.brochure .page.specsheet {
  padding: 17mm 17mm 21mm 16mm;
  display: flex;
  flex-direction: column;
  gap: 5mm;
}
/* rail down the outside (right) edge, turning into the page line */
.brochure .page.specsheet::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;
}
.specsheet__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8mm; }
.specsheet__head h2 {
  font-family: var(--font-brand);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
  padding: 0;
  border: 0;
}
.specsheet__ref { font-size: 13px; font-weight: 600; color: var(--fg-3); }
.specsheet__top { display: grid; grid-template-columns: 1fr 88mm; gap: 8mm; align-items: start; }
.specsheet__top--solo { grid-template-columns: 128mm; }   /* no drawing: the intro keeps a readable measure */
.specsheet__intro { font-size: 13px; line-height: 1.6; color: var(--fg-2); margin: 0; }

.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 7mm; align-items: start; }
.spec-col h3 {
  font-family: var(--font-brand);
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  padding-bottom: 1.6mm;
  border-bottom: 0.5mm solid var(--sheet-ink);
}
.spec-col dl { margin: 0; }
.spec-col .row { padding: 1.7mm 0; border-bottom: 0.2mm solid var(--gray-300); }
.spec-col dt { font-size: 12px; color: var(--fg-3); }
.spec-col dd { margin: 0.4mm 0 0; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--fg-1); }
.spec-col h3.spec-col__next { margin-top: 5mm; }   /* a second group in the same column */
.spec-note { font-size: 13px; line-height: 1.4; color: var(--fg-3); margin: 1.6mm 0 0; }   /* a footnote under a group */
/* Five or more groups: four narrower columns */
.spec-grid.spec-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 0 5mm; }
/* Many rows (40+): two columns of rows that read across, label left and
   value right, instead of stacking */
.spec-grid.spec-grid--across { grid-template-columns: 1fr 1fr; gap: 0 9mm; }
.spec-grid--across dl + h3 { margin-top: 4mm; }
.spec-grid--across .row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 3mm; padding: 0.8mm 0; }
.spec-grid--across dt { line-height: 1.3; }
.spec-grid--across dd { margin: 0; font-size: 13px; text-align: right; line-height: 1.3; }

/* dimensioned drawing (per-doc SVG overlay; see the EG-600 datasheet) */
.spec-dwg { margin: 0; }
.spec-dwg .views { display: flex; align-items: flex-start; gap: 6mm; padding: 1mm 0 8mm 9mm; }
.dwg { position: relative; flex: none; }
.dwg img { display: block; width: 100%; height: auto; }
.dwg svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dwg .dl { stroke: var(--primary-600); stroke-width: 2.4; fill: none; }
.dwg .ext { stroke: var(--primary-600); stroke-width: 1.4; fill: none; }
.dwg .dt { font: 600 30px var(--font-sans); fill: #985b10; text-anchor: middle; }
.dwg .dt-bg { fill: #fff; }
.spec-dwg figcaption { font-size: 12px; color: var(--fg-3); border-top: 0.2mm solid var(--gray-300); padding-top: 1.6mm; }

.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm 5mm; }
.benefit { border: 0.35mm solid var(--gray-300); border-radius: 3.5mm; padding: 2.4mm 4mm; }
.benefit__title { font-family: var(--font-brand); font-size: 15px; font-weight: 700; color: var(--fg-1); margin: 0 0 1mm; }
.benefit__body { font-size: 13px; line-height: 1.5; color: var(--fg-2); margin: 0; }
/* One-line highlights (no body): two columns, the orange square bullet
   (the booklet's .feature-list) */
.brochure .highlights { list-style: none; margin: 0; padding: 3mm 0 0; border-top: 0.2mm solid var(--gray-300); display: grid; grid-template-columns: 1fr 1fr; gap: 1.2mm 7mm; }
.brochure .highlights li { display: flex; align-items: baseline; gap: 2.4mm; font-size: 13px; line-height: 1.45; color: var(--fg-1); }
.brochure .highlights li::before { content: ""; flex: 0 0 1.6mm; height: 1.6mm; border-radius: 0.4mm; background: var(--or); transform: translateY(-0.3mm); }

.specsheet__foot {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1.7fr 1fr 0.8fr;
  gap: 6mm;
  padding-top: 4mm;
  border-top: 0.2mm solid var(--gray-300);
  font-size: 13px;
  line-height: 1.5;
}
.specsheet__foot h4 { font-size: 12px; font-weight: 600; color: var(--fg-3); margin: 0 0 1mm; }
.specsheet__foot p { margin: 0; font-size: 13px; color: var(--fg-1); }
.specsheet__foot .std { display: block; font-weight: 600; }
.specsheet__foot .note { color: var(--fg-3); margin-top: 1.5mm; }
.specsheet__foot > :last-child { text-align: right; }
/* page line: pinned, so the overflow check measures the sheet against it */
.specsheet__doc { position: absolute; left: 16mm; right: 17mm; bottom: 10mm; display: flex; justify-content: space-between; font-size: 12px; color: var(--fg-3); }
.specsheet__doc strong { color: var(--fg-1); font-weight: 600; }
.specsheet__disclaimer { font-size: 13px; line-height: 1.5; color: var(--fg-3); margin: 0; }

/* ---------- Folded brochure: the left-hand spec page ----------
   Rail and page line on the outside, i.e. the left. Print only: the web
   output lays it out as a recto (rail on the right). */
:where(html:not(.web)) .brochure .page.specsheet.specsheet--verso { padding: 17mm 16mm 21mm 17mm; }
:where(html:not(.web)) .brochure .page.specsheet.specsheet--verso::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;
}
:where(html:not(.web)) .specsheet--verso .specsheet__doc { left: 17mm; right: 16mm; }
.specsheet--verso .specsheet__top--solo { grid-template-columns: 150mm; }

@media print {
  .brochure .no-print, .brochure #tweaks-root, .brochure tweaks-panel { display: none !important; }
}