/* Shared layout for the printed grinder manuals: an A4 landscape tri-fold,
   two sheets (outside, inside), three 99 mm panels each. Print from the
   browser: A4 landscape, margins "None", two-sided, flip on short edge. */

:root {
  color-scheme: light;
  --ink: #2a2a2a;
  --muted: #555;
  --bar: #333;
  --bar-ink: #fff;
  --row: #e7e7e7;
  --rule: #9a9a9a;
  --page-bg: #e9e7e3;
  --head: 'Oswald', 'Arial Narrow', sans-serif;
  --body: 'Noto Sans', Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 8pt;
  line-height: 1.38;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

@page { size: A4 landscape; margin: 0; }

/* ---------- screen-only toolbar ---------- */
.toolbar {
  max-width: 297mm;
  margin: 0 auto;
  padding: 16px 0 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  font-size: 13px;
}
.toolbar h1 { font: 500 18px/1.2 var(--head); margin: 0; text-transform: uppercase; }
.toolbar button {
  font: 600 14px var(--body);
  padding: 8px 18px;
  border: 0;
  border-radius: 6px;
  background: var(--bar);
  color: var(--bar-ink);
  cursor: pointer;
}
.toolbar .hint { color: var(--muted); flex-basis: 100%; }
.toolbar .back { flex-basis: 100%; color: var(--muted); text-decoration: none; }
.toolbar .back:hover { color: var(--ink); text-decoration: underline; }

/* ---------- sheets and panels ---------- */
.sheet {
  position: relative;
  width: 297mm;
  height: 210mm;
  margin: 10mm auto;
  background: #fff;
  display: grid;
  grid-template-columns: repeat(3, 99mm);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
  overflow: hidden;
}

/* fold guides at 99 mm and 198 mm, top and bottom edge only */
.fold { position: absolute; width: 0; height: 4mm; border-left: .2mm solid #bbb; }
.fold.a { left: 99mm; } .fold.b { left: 198mm; }
.fold.top { top: 0; } .fold.bottom { bottom: 0; }

.panel {
  padding: 9mm 7mm 8mm;
  display: flex;
  flex-direction: column;
  gap: 3.2mm;
  overflow: hidden;
}

h2 {
  margin: 0;
  background: var(--bar);
  color: var(--bar-ink);
  font: 500 14pt/1 var(--head);
  text-transform: uppercase;
  letter-spacing: .02em;
  text-align: center;
  padding: 2.4mm 2mm 2.2mm;
}

p { margin: 0; }
.lead { font-size: 8.6pt; }
.small { font-size: 7pt; color: var(--muted); }
strong { font-weight: 700; }

/* numbered or bulleted lists with alternating grey rows */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { padding: 1.5mm 2.5mm; }
.rows li:nth-child(odd) { background: var(--row); }
.rows.compact li { padding: 1.1mm 2.2mm; font-size: 7.4pt; }

.plain { margin: 0; padding-left: 4mm; }
.plain li { margin: .4mm 0; }
.bullets { list-style: none; margin: 0; padding: 0; }
.bullets li { position: relative; padding-left: 3.2mm; margin: .9mm 0; }
.bullets li::before { content: '*'; position: absolute; left: 0; font-weight: 700; }

.note { font-size: 7.4pt; }
.note.box { background: var(--row); padding: 1.6mm 2.4mm; }
.dashed { border-top: .25mm dashed var(--rule); padding-top: 2.4mm; }

/* ---------- cover ---------- */
.cover { align-items: center; text-align: left; padding-top: 16mm; }
.cover .title { align-self: stretch; padding-left: 4mm; font-family: var(--head); text-transform: uppercase; line-height: .95; }
.cover .t1 { font-size: 27pt; font-weight: 600; line-height: 1.08; padding-bottom: 1.6mm; }
.cover .t2 { font-size: 78pt; font-weight: 700; letter-spacing: -.01em; }
.cover .t3 { font-size: 20pt; font-weight: 600; line-height: 1.1; margin-top: .6mm; }
.cover img { width: 62mm; margin-top: 6mm; }
.cover .keep { margin-top: auto; text-align: center; font-size: 8.6pt; color: var(--muted); }

/* ---------- parameters table ---------- */
table.params { border-collapse: collapse; width: 100%; font-size: 8pt; }
table.params td { border: .25mm solid var(--ink); padding: 1.15mm 2.2mm; }
table.params td + td { text-align: center; }

/* ---------- parts list + diagram ---------- */
.parts { display: grid; grid-template-columns: 1fr 31mm; gap: 2mm; align-items: center; }
.parts ol { list-style: none; margin: 0; padding: 0; }
.parts li { margin-bottom: 1.1mm; }
.parts li b { display: block; background: var(--row); padding: .9mm 2mm; font-size: 8.4pt; }
.parts li span { display: block; padding: .5mm 2mm 0; font-size: 7pt; color: var(--muted); line-height: 1.3; }
.parts img { width: 100%; }

/* ---------- accessories ---------- */
.accessories { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
.accessories > div + div { border-left: .25mm dashed var(--rule); padding-left: 3mm; }
.accessories h3 { margin: 0; font-size: 9pt; font-weight: 700; line-height: 1.3; }
.accessories p { margin-top: 1mm; }
.accessories img { display: block; margin: 2.5mm auto 0; }
.accessories .cup { width: 19mm; }
.accessories .bellows { width: 27mm; }

/* ---------- grind adjustment ---------- */
.adjust { display: grid; grid-template-columns: 1fr 21mm; gap: 2.5mm; align-items: center; }
.adjust img { width: 100%; }

/* ---------- operating steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 11mm 1fr; align-items: center; padding: 1.3mm 2mm 1.3mm 0; }
.steps li:nth-child(even) { background: var(--row); }
.steps .n { text-align: center; font-family: var(--head); line-height: 1; }
.steps .n small { display: block; font-size: 5.5pt; font-weight: 600; letter-spacing: .04em; }
.steps .n b { font-size: 19pt; font-weight: 600; }

/* ---------- importer, disposal ---------- */
.legal { margin-top: auto; display: flex; flex-direction: column; gap: 2.4mm; font-size: 7.4pt; }
.weee { display: grid; grid-template-columns: 9mm 1fr; gap: 2.5mm; align-items: center; }
.weee svg { width: 9mm; height: auto; }

.footer { margin-top: auto; text-align: center; font: 500 9pt var(--head); text-transform: uppercase; letter-spacing: .03em; }

/* a panel with more text than the others: tighter spacing */
.panel.dense { gap: 2.3mm; padding-top: 8mm; }
.panel.dense h2 { font-size: 13pt; padding: 2mm 2mm 1.8mm; }
.panel.dense .steps li { padding-top: .8mm; padding-bottom: .8mm; font-size: 7.6pt; }
.panel.dense .steps .n b { font-size: 16pt; }
.panel.dense .rows.compact li { padding: .8mm 2.2mm; font-size: 7.2pt; line-height: 1.32; }
.panel.dense .note { font-size: 7.2pt; }

/* ---------- the fuller leaflets (DF64V, CF80V) ---------- */
.cover .sub { align-self: stretch; padding-left: 4mm; margin-top: 2mm; font: 500 11pt var(--head); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cover .t2.long { font-size: 64pt; }
/* numbered drawing with its part list in two columns under it */
.diagram { display: block; width: 100%; }
.partlist { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 3mm; font-size: 7pt; line-height: 1.28; }
.partlist li { break-inside: avoid; margin-bottom: 1.2mm; }
.partlist b { display: block; font-size: 7.6pt; }
.partlist span { color: var(--muted); }
/* drawings with a caption under each, in a row */
.pics { display: grid; gap: 2mm; align-items: end; text-align: center; font-size: 6.8pt; line-height: 1.25; }
.pics figure { margin: 0; }
.pics img { display: block; margin: 0 auto 1mm; max-width: 100%; }
.pics b { display: block; font-size: 7.2pt; }
.pics.five { grid-template-columns: repeat(5, 1fr); }
.pics.four { grid-template-columns: repeat(4, 1fr); }
.pics.three { grid-template-columns: repeat(3, 1fr); }
.pics.h14 img { height: 14mm; width: auto; }
.pics.h18 img { height: 18mm; width: auto; }
.pics.h22 img { height: 22mm; width: auto; }
/* accessories: name + description per item */
.acclist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4mm 3mm; font-size: 7.2pt; }
.acclist b { display: block; font-size: 7.8pt; }
.acclist span { color: var(--muted); }
/* RPM display next to its text */
.withpic { display: grid; grid-template-columns: 1fr 22mm; gap: 2.5mm; align-items: start; }
.withpic img { width: 100%; }
.plain.tight li { margin: .2mm 0; }
.warn { font-size: 7.4pt; border-left: 1.2mm solid var(--bar); padding: .8mm 0 .8mm 2.4mm; }
.warn strong { display: block; }

/* ---------- print ---------- */
@media print {
  html, body { background: #fff; }
  .toolbar { display: none; }
  .sheet { margin: 0; box-shadow: none; break-after: page; }
  .sheet:last-of-type { break-after: auto; }
}

/* ---------- narrow screens: panels one under another ---------- */
@media screen and (max-width: 1150px) {
  .toolbar { padding: 16px; }
  .sheet { width: auto; max-width: 110mm; height: auto; margin: 16px auto; grid-template-columns: 1fr; }
  body { padding: 0 16px; }
  .fold { display: none; }
  .panel + .panel { border-top: 1px dashed var(--rule); }
  .cover { order: -1; }
}