/* Owner's guide: one stylesheet for screen preview and A4 portrait print.
   Paged.js reads the @page rules and lays the document out into pages.
   Look: warm paper, graphite ink, hairline rules, one signal colour for
   warnings. Fonts follow the marketing site (Instrument Sans / Serif). */

@import url('fonts/instrument-sans/400.css');
@import url('fonts/instrument-sans/500.css');
@import url('fonts/instrument-sans/600.css');
@import url('fonts/instrument-serif/400.css');
@import url('fonts/jetbrains-mono/400.css');

:root {
  --paper: #ffffff;      /* plain white: a tinted page cannot be printed on office paper */
  --ink: #1c1b19;
  --ink-2: #5b5853;      /* secondary text */
  --rule: #d9d6cf;       /* hairlines */
  --panel: #f0eee9;      /* figure / table backgrounds */
  --signal: #b4471c;     /* warnings only */
  --sans: 'Instrument Sans', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---------- Pages ---------- */
@page {
  size: A4 portrait;
  margin: 22mm 18mm 20mm 24mm;
  @top-left { content: string(chapter); font: 500 7.5pt var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
  @top-right { content: string(product); font: 400 7.5pt var(--sans); color: var(--ink-2); }
  @bottom-right { content: counter(page); font: 500 8pt var(--sans); color: var(--ink); }
}
@page cover { margin: 0; @top-left { content: none; } @top-right { content: none; } @bottom-right { content: none; } }

/* ---------- Base ---------- */
html { background: var(--paper); color: var(--ink); }
body { margin: 0; font: 400 9.5pt/1.5 var(--sans); }
h1, h2, h3 { font-weight: 500; line-height: 1.15; margin: 0; }
p { margin: 0 0 .7em; }
code, .mono { font-family: var(--mono); font-size: .9em; }

/* ---------- Cover ---------- */
.cover { page: cover; height: 297mm; box-sizing: border-box; padding: 26mm 24mm 22mm;
  display: flex; flex-direction: column; background: var(--paper); }
.cover .brand { width: 52mm; }
.cover .title { margin-top: auto; }
.cover .kicker { font: 500 8pt var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.cover h1 { font: 400 46pt/1.02 var(--serif); margin: 6mm 0 8mm; }
.cover .lead { max-width: 110mm; font-size: 11pt; color: var(--ink-2); }
.cover .foot { margin-top: 28mm; padding-top: 5mm; border-top: .5pt solid var(--ink);
  display: flex; justify-content: space-between; align-items: end; font-size: 8pt; color: var(--ink-2); }
.cover .maker { width: 38mm; }
.cover { position: relative; }
.cover .hero { position: absolute; right: 18mm; top: 46mm; width: 92mm; height: auto; opacity: .9; }
.cover .title { position: relative; }
.cover .serial { display: flex; align-items: baseline; gap: 2mm; margin-top: 10mm; font-size: 8pt; color: var(--ink-2); }
.cover .serial .mono { font-size: 11pt; color: var(--ink); }
.cover .serial .line { width: 32mm; border-bottom: .75pt solid var(--ink); }
.cover .serial span:first-child { text-transform: uppercase; letter-spacing: .1em; font-size: 7pt; margin-right: 2mm; }

/* Chapter opener: numeral in a solid block, heavy rule */
.chapter > header { border-bottom-width: 1.5pt !important; }
.chapter > header .num:not(:empty) { display: inline-flex; align-items: center; justify-content: center;
  width: 10mm; height: 10mm; background: var(--ink); color: #fff; font: 400 19pt/1 var(--serif); }
#api > header { margin-bottom: 4mm; }
#api .params th, #api .params td { padding: .8mm 0; }
#specs .spec th, #specs .spec td { padding: 1.3mm 0; }
#specs h3 { margin-top: 4mm; }
#specs .maker-foot { margin-top: 6mm; }
.chapter > header .num:empty { width: 0; }
.chapter > header:has(.num:empty) { grid-template-columns: 0 1fr; }

/* ---------- Chapters ---------- */
.chapter { break-before: page; }
.chapter > header { display: grid; grid-template-columns: 18mm 1fr; align-items: baseline;
  padding-bottom: 4mm; margin-bottom: 7mm; border-bottom: .5pt solid var(--ink); }
.chapter > header .num { font: 400 28pt/1 var(--serif); }
.chapter > header h2 { font: 400 22pt/1.1 var(--serif); string-set: chapter content(text); }
h3 { font-size: 10.5pt; font-weight: 600; margin: 6mm 0 2mm; }

/* ---------- Contents ---------- */
.toc ol { list-style: none; padding: 0; margin: 0; }
.toc li a { display: grid; grid-template-columns: 12mm 1fr auto; padding: 2.2mm 0;
  border-bottom: .5pt solid var(--rule); color: inherit; text-decoration: none; }
.toc li a::after { content: target-counter(attr(href), page); font-weight: 500; }

/* ---------- Steps with figures ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6mm 8mm; counter-reset: step; }
.steps > li { counter-increment: step; break-inside: avoid; }
.steps > li.wide { grid-column: 1 / -1; }
.steps figure { margin: 0 0 2.5mm; background: #fff; border: .5pt solid var(--rule); padding: 3mm; }
/* .fig shrink-wraps the drawing (fixed height, natural width), so it is never
   letterboxed or stretched and callouts placed in % land on the drawing */
.steps .fig { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; line-height: 0; }
.steps .fig img { display: block; height: 48mm; width: auto; max-width: 100%; object-fit: contain; }
.steps > li.wide .fig img { height: 44mm; }
.callout { position: absolute; transform: translate(1.2mm, -50%); white-space: nowrap;
  font: 500 6.5pt var(--sans); color: var(--ink); background: #fff; padding: 0 .8mm; }
.intro { font-size: 10.5pt; max-width: 140mm; margin-bottom: 5mm; }
.needs { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; margin-bottom: 6mm; padding: 3mm 0;
  border-top: .5pt solid var(--rule); border-bottom: .5pt solid var(--rule); }
.needs b { display: block; font-size: 7.5pt; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 1mm; }
.needs ul { margin: 0; padding-left: 4mm; }
.steps > li p::before { content: counter(step); display: inline-block; min-width: 6mm;
  font: 500 9.5pt var(--sans); color: var(--ink); }

/* ---------- Callouts ---------- */
.note, .warning { break-inside: avoid; margin: 5mm 0; padding: 3mm 4mm; border-left: 2pt solid var(--ink); background: var(--panel); }
.warning { border-left-color: var(--signal); }
.note b, .warning b { display: block; font-size: 7.5pt; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1mm; }
.warning b { color: var(--signal); }

/* ---------- Spec tables ---------- */
.spec { width: 100%; border-collapse: collapse; margin: 0 0 4mm; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 1.8mm 0; border-bottom: .5pt solid var(--rule); }
.spec th { width: 55mm; font-weight: 500; color: var(--ink-2); }

/* ---------- State diagram (shipping mode) ---------- */
.states { display: grid; grid-template-columns: 1fr 34mm 1fr; align-items: stretch; margin: 2mm 0 4mm; break-inside: avoid; }
.state { border: .5pt solid var(--ink); padding: 3mm; font-size: 8.5pt; }
.state b { display: block; font-size: 9.5pt; margin-bottom: 1mm; }
.state.on { background: var(--ink); color: #fff; }
.arrow { position: relative; display: flex; align-items: end; justify-content: center; text-align: center;
  padding: 0 2mm 9mm; font-size: 7pt; color: var(--ink-2); }
.arrow::after { content: ''; position: absolute; left: 2mm; right: 2mm; bottom: 6mm; border-top: .75pt solid var(--ink); }
.arrow::before { content: ''; position: absolute; right: 2mm; bottom: 4.6mm; border: 1.5mm solid transparent;
  border-left: 2mm solid var(--ink); border-right: 0; }

/* ---------- 24 h timeline ---------- */
.day { position: relative; height: 9mm; margin: 9mm 3mm 7mm; border: .5pt solid var(--ink); break-inside: avoid; }
.day .night { position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(135deg, var(--panel) 0 1.2mm, #fff 1.2mm 2.4mm); }
.day .tick { position: absolute; top: -1pt; bottom: -1pt; width: 0; border-left: 1.5pt solid var(--ink); }
.day .tick { font: 500 7pt var(--sans); }
.day .tick::after { content: ''; }
.day .tick { text-indent: 0; }
.day .tick, .day .hour { white-space: nowrap; }
.day .tick { padding-top: 10mm; transform: translateX(-50%); width: 10mm; text-align: center; border-left: 0;
  background: linear-gradient(var(--ink), var(--ink)) center top / 1.5pt 9mm no-repeat; }
.day .hour { position: absolute; top: -5mm; transform: translateX(-50%); font-size: 6.5pt; color: var(--ink-2); }
.caption { font-size: 8pt; color: var(--ink-2); }

/* ---------- Browser compatibility ---------- */
.compat { width: 100%; border-collapse: collapse; margin: 0 0 5mm; font-size: 8.5pt; }
.compat th, .compat td { padding: 1.6mm 2mm; border-bottom: .5pt solid var(--rule); text-align: center; }
.compat thead th { font-weight: 500; color: var(--ink-2); border-bottom-color: var(--ink); }
.compat tbody th { text-align: left; font-weight: 500; }
.compat .ok { font-weight: 600; }
.compat .no { color: var(--signal); }

/* ---------- Key facts row ---------- */
.facts { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0; margin: 0 0 6mm; border: .5pt solid var(--ink); break-inside: avoid; }
.facts > div { padding: 3mm; font-size: 8pt; color: var(--ink-2); }
.facts > div + div { border-left: .5pt solid var(--ink); }
.facts b { display: block; font-size: 7pt; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 1mm; }
.facts .big { display: block; font: 400 18pt/1.1 var(--serif); color: var(--ink); }
.facts .big.mono { font: 400 15pt/1.2 var(--mono); }

/* ---------- Annotated screenshots ---------- */
.shots { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6mm 8mm; }
.shots > li { break-inside: avoid; }
.shots > li.wide { grid-column: 1 / -1; }
/* The wrapper takes the image's own size (height: auto), so a screenshot is
   never stretched; marks are placed in % of that box. Dialog crops have
   transparent rounded corners and get a soft shadow instead of a frame. */
.shot { position: relative; border: .5pt solid var(--rule); margin-bottom: 2.5mm; line-height: 0; }
.shot img { display: block; width: 100%; height: auto; }
.shot.dialog { border: 0; }
.shot.dialog img { filter: drop-shadow(0 .4mm 1.2mm rgb(0 0 0 / .22)); }
.mark, .n { display: inline-flex; align-items: center; justify-content: center; width: 4.6mm; height: 4.6mm;
  border-radius: 50%; background: var(--signal); color: #fff; font: 600 7pt var(--sans); }
.mark { position: absolute; transform: translate(-50%, -50%); box-shadow: 0 0 0 .8mm #fff; }
.n { margin-right: 1.5mm; vertical-align: .2mm; }
.shots p { font-size: 8.5pt; line-height: 1.7; }
.shots > li.split { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; align-items: start; }
.muted { color: var(--ink-2); font-size: 8pt; }
.facts-2 { grid-template-columns: 1.4fr 1fr; }
.facts .big.mono { word-break: break-all; }
.keybox { display: block; height: 7mm; margin: 1mm 0 1.5mm; border-bottom: .75pt solid var(--ink); }
.keybox:not(:empty) { height: auto; font-size: 8pt; color: var(--ink); }
.shot-mid { width: 70%; margin-left: auto; margin-right: auto; }
.split2 { display: grid; grid-template-columns: 1.25fr 1fr; gap: 6mm; align-items: start; break-inside: avoid; }
.legend { display: grid; grid-template-columns: 6mm 1fr; gap: 2.2mm 0; margin: 0; font-size: 8.5pt; }
.legend dt { display: inline-flex; align-items: center; justify-content: center; width: 4.6mm; height: 4.6mm;
  border-radius: 50%; background: var(--signal); color: #fff; font: 600 7pt var(--sans); }
.legend dd { margin: 0; }
.legend dd > b:first-child { display: block; }

/* ---------- Screen preview (Paged.js output) ---------- */
@media screen {
  html { background: #8d8a84; }
  .pagedjs_pages { display: flex; flex-direction: column; align-items: center; gap: 8mm; padding: 8mm 0; }
  .pagedjs_page { background: var(--paper); box-shadow: 0 1mm 4mm rgb(0 0 0 / .25); }
}

/* Dashboard chapter fixes */
.facts-2 .big.mono { font-size: 11pt; word-break: normal; }
h3 { break-after: avoid; }
h3.newpage { break-before: page; margin-top: 0; }
.stack .shot { margin-bottom: 5mm; }
.stack .legend { grid-template-columns: 6mm 1fr 6mm 1fr; }
.nav3 { display: grid; grid-template-columns: 38mm 36mm 1fr; gap: 6mm; align-items: start; margin-bottom: 4mm; break-inside: avoid; }
.nav3 .legend { grid-template-columns: 6mm 1fr; }
.legend-plain { grid-template-columns: 6mm 1fr !important; }
.legend-plain dt { background: none; color: var(--ink); font-size: 10pt; }
.nowrap { white-space: nowrap; }

/* ---------- About: data flow ---------- */
.flow { display: grid; grid-template-columns: 1fr 26mm 1fr 14mm 1.2fr; align-items: stretch; margin: 2mm 0 2mm; break-inside: avoid; }
.flow .node { border: .75pt solid var(--ink); padding: 3mm; font-size: 8pt; color: var(--ink-2); }
.flow .node b { display: block; font-size: 10pt; color: var(--ink); margin-bottom: .8mm; }
.flow .node b.sep { margin-top: 2mm; padding-top: 2mm; border-top: .5pt solid var(--rule); }
.flow .node:first-child { background: var(--ink); color: #fff; }
.flow .node:first-child b { color: #fff; }
.flow .link { position: relative; display: flex; align-items: flex-end; justify-content: center; text-align: center;
  padding: 0 1mm 9mm; font-size: 6.8pt; line-height: 1.3; color: var(--ink-2); }
.flow .link::after { content: ''; position: absolute; left: 1mm; right: 1mm; bottom: 6mm; border-top: .75pt solid var(--ink); }
.flow .link::before { content: ''; position: absolute; right: 1mm; bottom: 4.6mm; border: 1.5mm solid transparent; border-left: 2mm solid var(--ink); border-right: 0; }
.flow-side { font-size: 8pt; color: var(--ink-2); margin-bottom: 4mm; }
.flow-side b { color: var(--ink); }
.why th { width: 58mm; color: var(--ink); }

.checklist { margin: 0 0 5mm; padding-left: 5mm; font-size: 9pt; }
.checklist li { margin-bottom: 1.5mm; padding-left: 1mm; }
.checklist li::marker { font-weight: 600; color: var(--signal); }
.facts u { text-decoration-thickness: .75pt; text-underline-offset: .6mm; color: var(--ink); font-weight: 600; }

/* ---------- Troubleshooting cards ---------- */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; }
.card { break-inside: avoid; border: .5pt solid var(--ink); }
.card.wide { grid-column: 1 / -1; }
.card h4 { margin: 0; padding: 2.6mm 3.5mm; font-size: 9.5pt; font-weight: 600; background: var(--ink); color: #fff; }
.ladder { list-style: none; counter-reset: fix; margin: 0; padding: 1mm 3.5mm 2.5mm; }
.ladder li { counter-increment: fix; display: grid; grid-template-columns: 5mm 7mm 1fr; align-items: start;
  padding: 2mm 0; border-bottom: .5pt solid var(--rule); font-size: 8.3pt; line-height: 1.45; }
.ladder li:last-child { border-bottom: 0; }
.ladder li::before { content: counter(fix); font: 600 8pt var(--sans); color: var(--signal); padding-top: .6mm; grid-column: 1; grid-row: 1; }
.ladder svg { width: 5mm; height: 5mm; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; grid-column: 2; grid-row: 1; }
.ladder span { grid-column: 3; grid-row: 1; }
.ladder.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 5mm; }
.ladder.cols li { border-bottom: 0; }

/* ---------- API ---------- */
.code { margin: 0 0 4mm; padding: 3mm 4mm; background: var(--panel); border-left: 2pt solid var(--ink);
  font: 400 7pt/1.38 var(--mono); white-space: pre; overflow: hidden; break-inside: avoid; }
#api h3 { margin-top: 4mm; }
#api .facts { margin-bottom: 3mm; }
.spec code { font-size: 8pt; }
.params th { width: 34mm; }
.params th, .params td, .fields th, .fields td { padding: 1.1mm 0; }
.params td:nth-child(2) { width: 38mm; }
.fields th { width: 30mm; font-weight: 400; }
.fields td { font-size: 8pt; }
.facts .big.mono { font-size: 10pt; }
.maker-foot { margin-top: 10mm; padding-top: 4mm; border-top: .5pt solid var(--ink); display: flex; justify-content: flex-end; }
.maker-foot img { width: 34mm; }

/* Running header text per variant: each guide sets it with a hidden .running element on its cover. */
.running { string-set: product content(text); position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* To be confirmed: facts the user has not confirmed yet. Highlighted so they cannot be printed by accident. */
.tbc { background: #ffe58a; box-shadow: 0 0 0 1.5pt #ffe58a; }

/* IMU cover: the website's enclosure drawing, wider than the env pole drawing. */
.cover .hero-imu { width: 128mm; top: 58mm; right: 20mm; color: var(--ink); opacity: 1; }
.cover .hero-imu .hero-word { font: 500 34px var(--sans); letter-spacing: .2em; }

/* ---------- Web view (no Paged.js): each section is shown as a sheet ---------- */
.web body { margin: 0; padding: 24px 0 48px; background: #e9e7e2; }
.web section.cover, .web section.chapter {
  box-sizing: border-box; width: min(210mm, calc(100% - 24px)); margin: 0 auto 24px;
  padding: 18mm; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.web section.cover { height: auto; min-height: 270mm; }
.web .toc li a::after { content: none; }
.web h3.newpage { margin-top: 10mm; }
@media (max-width: 700px) {
  .web section.cover, .web section.chapter { padding: 8mm 6mm; }
  .web .cover .hero { position: static; width: 100%; }
}