/* Rulebook typesetting for A4 print and the screen. Colours and faces come from art.js THEME. */
@page { size: A4; margin: 18mm 17mm 20mm; @bottom-center { content: counter(page); font: 9pt 'Barlow Condensed', sans-serif; color: #666; } }
@page :first { @bottom-center { content: none; } }
:root { --paper: #fff; --ink: #222; --muted: #777; --accent: #b80; --body: 'Lora', serif; --head: 'Barlow Condensed', sans-serif; --ui: 'Barlow', sans-serif; }
html { background: #8a8a8a; }
body { margin: 0; font: 10pt/1.42 var(--body); color: var(--ink); counter-reset: h2; }
main { background: #fff; max-width: 176mm; margin: 12px auto; padding: 18mm 17mm; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
#errors { display: none; background: #fdd; color: #900; font: 12px monospace; white-space: pre-wrap; padding: 8px; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 700; line-height: 1.1; break-after: avoid; }
h2 { counter-increment: h2; counter-reset: h3; font-size: 17pt; margin: 1.2em 0 .35em; border-bottom: .6pt solid var(--ink); padding-bottom: 2pt; }
h2::before { content: counter(h2) "  "; color: var(--accent); }
h3 { counter-increment: h3; font-size: 12.5pt; margin: 1em 0 .25em; }
h3::before { content: counter(h2) "." counter(h3) "  "; color: var(--accent); }
h4 { font-size: 10.5pt; margin: .8em 0 .2em; }
.unnumbered::before { content: none !important; }
p { margin: 0 0 .5em; text-align: left; hyphens: auto; orphans: 2; widows: 2; }
ul, ol { margin: 0 0 .5em; padding-left: 1.3em; }
li { margin: .12em 0; }
strong { font-weight: 600; }
table { border-collapse: collapse; margin: .4em 0 .8em; font: 9pt/1.3 var(--ui); break-inside: avoid; }
th { font-family: var(--head); font-weight: 700; text-align: left; border-bottom: .8pt solid var(--ink); padding: 2pt 8pt 2pt 0; }
td { border-bottom: .3pt solid #ccc; padding: 2pt 8pt 2pt 0; vertical-align: top; }
aside { break-inside: avoid; margin: .6em 0 .9em; padding: 6pt 9pt; border-radius: 2pt; font-size: 9.3pt; }
aside > :last-child { margin-bottom: 0; }
aside.example { background: color-mix(in srgb, var(--accent) 12%, white); border-left: 2.5pt solid var(--accent); }
aside.note { background: #f1f1f1; border-left: 2.5pt solid var(--ink); }
aside.designer { font-style: italic; color: #444; border-left: 1pt solid var(--muted); padding-left: 8pt; }
aside.box { border: .5pt solid var(--ink); }
figure { margin: .6em 0 .9em; text-align: center; break-inside: avoid; }
figure svg { max-width: 100%; } /* the SVG's own mm width/height = true size */
figcaption { font: italic 8.5pt/1.3 var(--ui); color: var(--muted); margin-top: 3pt; }
code { font: 8.5pt monospace; }
hr { border: 0; break-after: page; }
.cover { min-height: 230mm; display: flex; flex-direction: column; justify-content: center; text-align: center; break-after: page; }
.cover h1 { font-size: 46pt; letter-spacing: 1.5pt; margin: 0 0 .2em; }
.cover p { font-size: 12pt; text-align: center; }
.toc { font: 10pt/1.6 var(--ui); columns: 2; column-gap: 10mm; }
.toc .l3 { padding-left: 1.4em; font-size: 9pt; }
.comp td:first-child { font-family: var(--head); font-weight: 700; text-align: right; padding-right: 10pt; }
mark.err { background: #f88; }
@media print { html { background: none; } main { box-shadow: none; margin: 0; padding: 0; max-width: none; } #errors { display: none !important; } }