/* Shared look of every page in /docs/guide/. Prints on A4, reads on a phone. */
:root {
  --ink: #111; --muted: #555; --line: #ccc; --bg: #fff; --soft: #f4f4f4;
  --warn: #b00020; --ok: #1d5e2a; --link: #1f5fbf;
  --halt-bg: #fff6d6; --halt: #e0a800;
}
@page { size: A4; margin: 12mm; }
* { box-sizing: border-box; }
body { font-family: "DejaVu Sans", Arial, sans-serif; color: var(--ink); background: var(--bg);
       max-width: 190mm; margin: 0 auto; padding: 0 16px 12mm; font-size: 11pt; line-height: 1.45; }
a { color: var(--link); }
h1 { font-size: 20pt; margin: 8mm 0 2mm; }
h2 { font-size: 15pt; margin: 8mm 0 3mm; border-bottom: 2px solid var(--ink); padding-bottom: 1mm;
     break-after: avoid; }
h3 { font-size: 12pt; margin: 5mm 0 2mm; break-after: avoid; }
.sub { color: var(--muted); margin: 0 0 4mm; }
.note { color: var(--muted); font-size: 9.5pt; }
code { font-size: 10pt; }
pre { background: var(--soft); padding: 2mm 3mm; border-radius: 4px; font-size: 10pt; overflow-x: auto;
      white-space: pre-wrap; }

/* Navigation */
.topnav { font-size: 9.5pt; margin: 4mm 0 0; color: var(--muted); }
.before { background: var(--soft); border-radius: 4px; padding: 2mm 3mm; margin: 3mm 0; }
.next { border-top: 2px solid var(--ink); margin-top: 8mm; padding-top: 3mm; font-weight: 700; }

/* Boxes */
.warn { border: 2px solid var(--warn); border-radius: 6px; padding: 3mm 4mm; margin: 4mm 0; break-inside: avoid; }
.warn > b:first-child { color: var(--warn); }
.warn ul { margin: 1mm 0 0; padding-left: 5mm; }
.halt { background: var(--halt-bg); border-left: 5px solid var(--halt); padding: 2mm 4mm; margin: 5mm 0;
        break-inside: avoid; }
.ok { color: var(--ok); }
.ok::before { content: "✓ "; font-weight: 700; }

/* Steps */
.step { display: flex; gap: 4mm; margin: 4mm 0; break-inside: avoid; }
.step .n { flex: 0 0 9mm; height: 9mm; border-radius: 50%; background: var(--ink); color: #fff;
           font-weight: 700; font-size: 13pt; display: flex; align-items: center; justify-content: center; }
.step > div:last-child { flex: 1; min-width: 0; }
.step p { margin: 0 0 2mm; }

/* Tables */
table { border-collapse: collapse; width: 100%; margin: 3mm 0; font-size: 10pt; }
th, td { border: 1px solid var(--line); padding: 1.5mm 2mm; text-align: left; vertical-align: top; }
th { background: var(--soft); }
table.fill td { height: 7mm; min-width: 18mm; }
.tablewrap { overflow-x: auto; }

/* Figures and photos with marker chips */
figure { margin: 4mm 0; break-inside: avoid; }
figure svg { width: 100%; height: auto; display: block; background: #fff; border-radius: 4px; }
figcaption { color: var(--muted); font-size: 9.5pt; margin-top: 1mm; }
.photos { display: flex; gap: 4mm; flex-wrap: wrap; }
.photo { position: relative; flex: 1 1 80mm; }
.photo img { width: 100%; display: block; border-radius: 4px; }
.photo.small { max-width: 90mm; }
.photo > .mk { position: absolute; transform: translate(-50%, -50%); }
/* Chip positions are percentages of the image only, not of image plus caption. */
.frame { position: relative; }
.frame > .mk { position: absolute; transform: translate(-50%, -50%); }

/* Start page list */
.toc { list-style: none; padding: 0; margin: 0; }
.toc li { margin: 1.5mm 0; display: flex; gap: 3mm; }
.toc .num { flex: 0 0 9mm; font-weight: 700; }

/* Marker chips: one color per part, the same on every page */
.mk { display: inline-block; min-width: 2.1em; text-align: center; font-weight: 700; font-size: 9.5pt;
      border: 1px solid #000; border-radius: 3px; padding: 0 3px; line-height: 1.35; color: #000;
      background: #eee; text-decoration: none; white-space: nowrap; }
a.mk:hover { outline: 2px solid var(--link); }
.CM{background:#cdb4db}.KU{background:#b8c0c8}.CB{background:#90be6d}.ST{background:#d4e09b}
.DI{background:#8ecae6}.DK{background:#ffd6a5}.DS{background:#fdffb6}.RT{background:#e5989b}
.NT{background:#c7c7c7}.UC{background:#b5e48c}.MO{background:#4cc9f0}.UK{background:#99d98c}
.AD{background:#ffafcc}.AN{background:#f7b267}.AF{background:#f4845f}.AG{background:#f28482}.SI{background:#e9edc9}
.PS{background:#f4a261}.AK{background:#e76f51}.SK{background:#ff9f9f}.JD{background:#6fa8dc}
.JC{background:#ffe066}.SH{background:#f9c74f}.SL{background:#f9844a}.KH{background:#ffe66d}
.KL{background:#ffb38a}.YA{background:#ff8fa3}.YB{background:#bdb2ff}.YC{background:#a0c4ff}
.TM{background:#9bf6ff}.TC{background:#caffbf}.MI{background:#e9c46a}.TS{background:#d0f4de}
.LR{background:#e4c1f9}.BP{background:#fcd5ce}.BU{background:#d8e2dc}.BD{background:#ffe5d9}
.BG{background:#cfcfcf}.GF{background:#dee2ff}.GR{background:#c9ada7}.GT{background:#b8e0d2}
.GK{background:#95b8d1}.GS{background:#d6eadf}.GM{background:#eac4d5}.GC{background:#f6bd60}
.GE{background:#c0c0c0}.GZ{background:#a9a9a9}.UW{background:#76c893}
.WZ,.DF,.DM,.DG,.SS,.FB,.LZ,.EL,.KB,.IP,.ZB,.SB{background:#ddd}

@media (prefers-color-scheme: dark) {
  :root { --ink: #eee; --muted: #aaa; --line: #555; --bg: #16181b; --soft: #23262b;
          --warn: #ff6b81; --ok: #7fd18f; --link: #7fb0ff; --halt-bg: #3a3215; }
  .step .n { color: #16181b; }
}
@media print {
  :root { --ink: #111; --muted: #555; --line: #ccc; --bg: #fff; --soft: #f4f4f4;
          --warn: #b00020; --ok: #1d5e2a; --link: #111; --halt-bg: #fff6d6; }
  .step .n { color: #fff; }
  a { text-decoration: none; }
}