/* Print style for manual.md: the gallery's dark palette and type (site/web/root.css) */
@font-face {
  font-family: "Montserrat";
  src: url("../site/web/Montserrat.ttf") format("truetype");
  font-weight: 100 900;
}

:root {
  --bg: #0a0a0a;
  --bg-light: #1a1a1a;
  --ui-bg: #1a1717;
  --fg: #f0ede8;
  --muted: rgba(240, 237, 232, 0.6);
  --accent: hsl(31, 38%, 64%);
  --dark-accent: hsl(31, 38%, 50%);
}

@page {
  size: A4;
  margin: 18mm 17mm 20mm;
  background: var(--bg);
  @bottom-center {
    content: counter(page);
    font: 8pt "Montserrat", sans-serif;
    letter-spacing: 0.15em;
    color: rgba(240, 237, 232, 0.4);
  }
}
@page :first {
  @bottom-center { content: none; }
}

html {
  background: var(--bg);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

body {
  font: 300 10pt/1.6 "Montserrat", sans-serif;
  color: var(--fg);
  letter-spacing: 0.01em;
}
/* In a browser: a comfortable reading column (print uses the @page margins) */
@media screen {
  body {
    max-width: 60rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    font-size: 12.5pt;
  }
  h1 { margin-top: 3rem; }
  table { font-size: 0.9em; }
}
/* Narrow screenshots (marked by the page script) sit right, their text wraps on the left */
@media screen and (min-width: 40rem) {
  p.narrow {
    float: right;
    width: 42%;
    margin: 0.3rem 0 1.5rem 1.5rem;
  }
  table.beside { width: auto; }
  h2, h3 { clear: both; }
}

/* Title page: h1, intro, contents */
h1 {
  margin: 30mm 0 6mm;
  font-weight: 600;
  font-size: 26pt;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
h1 + p { font-size: 12pt; color: var(--fg); }

h2 {
  margin: 9mm 0 4mm;
  padding-bottom: 2mm;
  border-bottom: 1px dotted var(--accent);
  font-weight: 500;
  font-size: 15pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  break-after: avoid;
}
/* the title page holds h1, intro and contents; sections then flow on */
#contents + ol + hr + h2, #contents + ol + h2 { break-before: page; margin-top: 0; }

h3 {
  margin: 6mm 0 2mm;
  font-weight: 500;
  font-size: 11pt;
  letter-spacing: 0.1em;
  color: var(--accent);
  break-after: avoid;
}

p, ul, ol { margin: 0 0 3mm; }
ul, ol { padding-left: 6mm; }
li { margin-bottom: 1mm; }
li::marker { color: var(--accent); }
strong { font-weight: 600; }
em { color: var(--muted); }

a { color: var(--accent); text-decoration: none; }

hr { display: none; }

#contents + ol {
  columns: 2;
  column-gap: 12mm;
  padding: 5mm 6mm 5mm 12mm;
  border: 1px solid var(--dark-accent);
  background: var(--ui-bg);
}

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 3px;
  background: var(--bg-light);
  color: var(--accent);
}
pre {
  margin: 0 0 4mm;
  padding: 3mm 4mm;
  border-left: 2px solid var(--dark-accent);
  background: var(--ui-bg);
  break-inside: avoid;
}
pre code { padding: 0; background: none; color: var(--fg); }

/* Screenshots: markdown puts the image and its *Figure n* caption in one paragraph */
p:has(> img) {
  margin: 5mm 0 6mm;
  text-align: center;
  break-inside: avoid;
}
img {
  display: block;
  box-sizing: border-box;
  margin: 0 auto 2mm;
  max-width: 99%;
  max-height: 120mm;
  border: 0.3mm solid var(--dark-accent);
}
p:has(> img) em {
  font-size: 8.5pt;
  letter-spacing: 0.12em;
  text-transform: lowercase;
}

table {
  width: 100%;
  margin: 0 0 4mm;
  border-collapse: collapse;
  border: 1px solid var(--dark-accent);
  font-size: 9pt;
}
tr { break-inside: avoid; }
th {
  padding: 2mm 3mm;
  text-align: left;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: var(--bg);
  border-bottom: 1px solid var(--dark-accent);
}
td { padding: 1.5mm 3mm; vertical-align: top; background: var(--ui-bg); }
tr + tr td { border-top: 1px dotted rgba(240, 237, 232, 0.15); }