/* aetheriae - Copyright (c) 2026 Morphor - All rights reserved
   Author: Eli Clement
   The user manual's look, the Morphor house style: the mark and the logo, Neue Haas Grotesk Display for the titles
   and the sections, Neue Haas Grotesk Text for the reading. On the screen across the whole window, light or dark
   (the system's, or chosen: html[data-theme]); printed (and as the PDF, tools/manual_pdf.mjs) always light: a dark
   cover and back cover, the mark inside the cover, the imprint, the contents with their pages, a chapter to a page.
   The pictures of the instrument are in its Dark 3D theme whichever this is. tools/manual.py copies it beside the manual. */

@font-face { font-family: "Neue Haas Grotesk Display"; src: url("NeueHaasDisplay-Roman.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Neue Haas Grotesk Display"; src: url("NeueHaasDisplay-Medium.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Neue Haas Grotesk Display"; src: url("NeueHaasDisplay-Bold.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }
@font-face { font-family: "Neue Haas Grotesk Text"; src: url("NHaasGroteskTXStd-55Rg.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Neue Haas Grotesk Text"; src: url("NHaasGroteskTXStd-65Md.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Neue Haas Grotesk Text"; src: url("NHaasGroteskTXStd-75Bd.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }

/* light (the default, and always in print) */
:root {
  --display: "Neue Haas Grotesk Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text: "Neue Haas Grotesk Text", "Neue Haas Grotesk Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", Menlo, Consolas, monospace;
  --paper: #fbfbf9; --side: #f2f2ef; --panel: #ecece9; --ink: #161616; --ink-2: #44443f; --ink-3: #7c7c76;
  --line: #dcdcd6; --line-2: #a9a9a2; --accent: #1f7fd1; --note: #edf4fb; --cover: #1c1c1c; --cover-ink: #f4f4f2;
  --mark-invert: 1;                       /* the mark and the logo are white: dark on a light page */
  /* the Signal path and Modulation drawings' colours, by the instrument's names (ui/style.css's .signalpath rules) */
  --chrome: #f2f2ef; --panel-2: #f7f7f5; --panel-3: #e4e4df; --line-2-d: #a9a9a2;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #141414; --side: #101010; --panel: #1d1d1d; --ink: #ecece8; --ink-2: #b9b9b4; --ink-3: #7c7c76;
  --line: #2e2e2e; --line-2: #4d4d4d; --accent: #4aa8ff; --note: #16212e; --cover: #0c0c0c; --cover-ink: #f4f4f2;
  --mark-invert: 0; --chrome: #101010; --panel-2: #222222; --panel-3: #2b2b2b;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141414; --side: #101010; --panel: #1d1d1d; --ink: #ecece8; --ink-2: #b9b9b4; --ink-3: #7c7c76;
    --line: #2e2e2e; --line-2: #4d4d4d; --accent: #4aa8ff; --note: #16212e; --cover: #0c0c0c; --cover-ink: #f4f4f2;
    --mark-invert: 0; --chrome: #101010; --panel-2: #222222; --panel-3: #2b2b2b;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--paper); color: var(--ink); font: 400 16.5px/1.65 var(--text);
  display: grid; grid-template-columns: 290px minmax(0, 1fr); grid-template-areas: "bar bar" "front front" "side body" "back back";
}
h1, h2, h3, h4, dt, th, .button, .wordmark, .bar { font-family: var(--display); }
h1, h2, h3 { line-height: 1.15; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, kbd { font-family: var(--mono); font-size: .86em; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 0 .3em; }
kbd { white-space: nowrap; }
img { max-width: 100%; height: auto; }
.muted { color: var(--ink-3); font-size: .88em; }
.button { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--panel);
          border: 1px solid var(--line-2); border-radius: 3px; padding: 6px 12px; cursor: pointer; text-decoration: none; display: inline-block; }
.button:hover { border-color: var(--accent); text-decoration: none; }

/* the bar along the top: the mark, the name, and the tools */
.bar { grid-area: bar; position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px;
       padding: 10px 28px; background: var(--side); border-bottom: 1px solid var(--line); }
.bar .home { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bar .home img { height: 32px; filter: invert(var(--mark-invert)); }
.bar .home em { font-style: normal; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--ink-3); }
.bar .tools { display: flex; gap: 8px; }

/* the cover, on the screen a dark band across the top; the inside cover only in print; the imprint below the band */
.front { grid-area: front; }
.cover { position: relative; background: var(--cover); color: var(--cover-ink); padding: 64px 56px 56px; display: grid; grid-template-columns: auto 1fr; column-gap: 40px; align-items: end; }
.cover .mark { grid-row: 1 / span 4; width: 120px; opacity: .9; }
.cover .wordmark { margin: 0; font-size: 64px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.cover .subtitle { margin: 8px 0 0; font: 400 20px var(--display); color: #c8c8c3; }
.cover .kind { margin: 2px 0 0; font: 700 20px var(--display); }
.cover .version { margin: 10px 0 0; font-size: 13px; color: #8a8a85; letter-spacing: .03em; }
.cover .logo { position: absolute; right: 56px; top: 56px; width: 150px; }
.inside { display: none; }
.imprint { padding: 28px 56px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: 8px 48px; align-items: start; font-size: 14px; color: var(--ink-2); }
.imprint .logo { width: 140px; filter: invert(var(--mark-invert)); }
.imprint p { margin: 0; }
.imprint .contact { display: grid; grid-template-columns: auto auto; gap: 2px 14px; margin: 0; }
.imprint .contact dt { font-weight: 600; color: var(--ink); }
.imprint .contact dd { margin: 0; }

/* the contents beside the text, all the way down */
.side { grid-area: side; position: sticky; top: 52px; height: calc(100vh - 52px); overflow: auto; padding: 24px 18px 40px 24px; background: var(--side); border-right: 1px solid var(--line); font: 14px/1.4 var(--display); }
.side h2 { margin: 0 0 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.side ol { list-style: none; margin: 0; padding: 0; }
.side li.l1 { margin-top: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 12.5px; }
.side li.l2 { margin: 2px 0 0 10px; }
.side a { color: var(--ink-2); display: block; padding: 2px 6px; border-radius: 3px; }
.side a.here { color: var(--ink); background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* the text: the whole width beside the contents */
.body { grid-area: body; padding: 0 56px 48px; min-width: 0; }
.contents { display: none; }               /* on the screen the contents are beside the text */
.chapter { border-top: 1px solid var(--line); padding-top: 34px; margin-top: 34px; }
.chapter:first-of-type { border-top: 0; }
.chapter h1 { font-size: 36px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; margin: 0 0 18px; }
.chapter h2 { font-size: 22px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; margin: 34px 0 10px; }
.chapter h3 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 24px 0 8px; }
ul, ol { padding-left: 1.4em; }
li { margin: 3px 0; }
aside.note { background: var(--note); border-left: 3px solid var(--accent); border-radius: 0 3px 3px 0; padding: 10px 18px; margin: 18px 0; }
aside.note p { margin: 4px 0; }

/* the pictures of the instrument (its Dark 3D theme) and the drawings */
figure { margin: 22px 0 28px; }
figure.shot img { display: block; border-radius: 4px; box-shadow: 0 6px 22px rgba(0, 0, 0, .28); }
figure.shot img[src$=".svg"] { box-shadow: none; background: var(--panel); border: 1px solid var(--line); padding: 8px; box-sizing: border-box; }     /* a drawing (tools/manual_figures.py), not a screenshot */
/* pictures side by side (lines of pictures together in a chapter): three to a row, two on a narrow window */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 16px; margin: 1.4em 0; }
.gallery figure.shot { margin: 0; }
.gallery figure.shot img { width: 100%; height: auto; }
.gallery figcaption { font-size: .82em; }
@media screen and (max-width: 760px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
figure figcaption { font: 13px/1.4 var(--display); color: var(--ink-3); margin-top: 8px; }
figure.drawing { max-width: 820px; }
figure.drawing svg { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 6px; }

table { border-collapse: collapse; width: 100%; margin: 12px 0 22px; font-size: 14.5px; }
th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line-2); padding: 6px 12px 6px 0; }
td { vertical-align: top; border-bottom: 1px solid var(--line); padding: 7px 12px 7px 0; }
table.ref td:nth-child(1) { width: 18%; }
table.ref td:nth-child(2) { width: 20%; color: var(--ink-2); }
table.ref td:nth-child(3) { width: 10%; color: var(--ink-2); white-space: nowrap; }
table.keys td:first-child { width: 30%; }

/* the glossary, the acknowledgements, the index */
dl.glossary { display: grid; grid-template-columns: minmax(160px, 20%) 1fr; gap: 6px 24px; margin: 8px 0; }
dl.glossary dt { font-weight: 700; }
dl.glossary dd { margin: 0; color: var(--ink-2); }
ul.thanks { list-style: none; padding: 0; font: 400 18px/1.6 var(--display); }
.index { columns: 3 260px; column-gap: 40px; font-size: 14px; }
.index section { break-inside: avoid-column; }
.index h3 { margin: 18px 0 6px; font-size: 18px; }
.index ul { list-style: none; padding: 0; margin: 0; }
.index li { margin: 0 0 5px; break-inside: avoid; }
.index .term { font-weight: 600; }
.index a { display: block; margin-left: 12px; color: var(--ink-2); font-size: 13px; }
.index a .pg { display: none; }

/* the back cover: on the screen a dark band at the very end */
.back { grid-area: back; }
.backcover { background: var(--cover); color: var(--cover-ink); padding: 48px 56px; display: flex; align-items: center; gap: 32px; font: 400 15px/1.5 var(--display); }
.backcover .mark { width: 60px; opacity: .85; }
.backcover p { margin: 0; }
.backcover p:first-of-type { font-size: 22px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.backcover p:first-of-type span { font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; color: #a8a8a3; }
.backcover .links { color: #a8a8a3; }
.backcover .logo { margin-left: auto; width: 140px; }

/* narrow windows: the contents above the text */
@media (max-width: 900px) {
  body { display: block; }
  .side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 16px; }
  .body, .imprint { padding-left: 16px; padding-right: 16px; }
  .cover { padding: 32px 16px; grid-template-columns: 1fr; } .cover .mark { width: 60px; } .cover .wordmark { font-size: 40px; } .cover .logo { position: static; margin-top: 18px; }
  .imprint { grid-template-columns: 1fr; } dl.glossary { grid-template-columns: 1fr; }
}

/* ---------- printed, and the PDF: a document, always light ---------- */
@page { size: A4; margin: 20mm 17mm 18mm;
  @top-left { content: "Aetheriae \2014  User manual"; font: 8pt "Neue Haas Grotesk Text", Helvetica, sans-serif; color: #7c7c76; vertical-align: bottom; padding-bottom: 3mm; }
  @bottom-right { content: counter(page); font: 8.5pt "Neue Haas Grotesk Text", Helvetica, sans-serif; color: #44443f; vertical-align: top; padding-top: 3mm; } }
@page full { margin: 0; @top-left { content: none; } @bottom-right { content: none; } }
@media print {
  :root, :root[data-theme="dark"] { --paper: #ffffff; --side: #ffffff; --panel: #f3f3f1; --ink: #111111; --ink-2: #3c3c3a; --ink-3: #6e6e69;
          --line: #d8d8d2; --line-2: #9c9c96; --accent: #1f6fb8; --note: #f1f6fb; --mark-invert: 1; --chrome: #f3f3f1; --panel-2: #f7f7f5; --panel-3: #e6e6e2; color-scheme: light; }
  body { display: block; font-size: 10pt; line-height: 1.55; background: #fff; }
  .bar, .side { display: none; }
  html[data-part="front"] .part:not(.front), html[data-part="body"] .part:not(.body), html[data-part="back"] .part:not(.back) { display: none; }
  /* the cover, the inside cover and the back cover: the whole page */
  .cover, .inside, .backcover { page: full; break-after: page; height: 296mm; margin: 0; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .cover { display: flex; flex-direction: column; align-items: flex-start; padding: 70mm 22mm 24mm; }
  .cover .mark { display: none; }
  .cover .wordmark { font-size: 54pt; }
  .cover .subtitle { font-size: 16pt; margin-top: 4mm; }
  .cover .kind { font-size: 16pt; }
  .cover .version { font-size: 9pt; margin-top: 6mm; }
  .cover .logo { position: static; margin-top: auto; align-self: center; width: 46mm; }      /* at the foot of the page, in its middle */
  .inside { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 30mm; background: #fff; }
  .inside img { width: 120mm; filter: invert(1); opacity: .38; }
  .imprint { display: flex; flex-direction: column; justify-content: flex-start; gap: 6mm; break-after: page; padding: 0; border: 0; font-size: 10pt; min-height: 240mm; }
  .imprint .contact { margin-top: auto; grid-template-columns: 46mm auto; }
  .backcover { break-before: page; break-after: auto; flex-direction: column; justify-content: center; text-align: center; gap: 10mm; padding: 0; }
  .backcover .mark { width: 34mm; }
  .backcover .logo { margin: 30mm 0 0; width: 46mm; }
  /* the contents with their pages (tools/manual_pdf.mjs fills them in) */
  .contents { display: block; break-after: page; }
  .contents h1 { font-size: 22pt; text-transform: uppercase; margin: 0 0 6mm; }
  .contents ol { list-style: none; padding: 0; margin: 0; }
  .contents li { margin: 0; }
  .contents li.l1 { margin-top: 3mm; font: 700 10pt var(--display); text-transform: uppercase; }
  .contents li.l2 { margin-left: 6mm; font-size: 9.5pt; }
  .contents a { display: flex; align-items: baseline; gap: 2mm; color: var(--ink); text-decoration: none; }
  .contents .dots { flex: 1; border-bottom: .6pt dotted #9c9c96; transform: translateY(-1mm); }
  .contents .pg { min-width: 7mm; text-align: right; }
  .body { padding: 0; }
  .chapter { border-top: 0; margin: 0; padding: 0; break-before: page; }
  .chapter h1 { font-size: 22pt; margin-bottom: 6mm; }
  .chapter h2 { font-size: 13pt; margin: 7mm 0 2.5mm; }
  .chapter h3 { font-size: 10pt; margin: 5mm 0 2mm; }
  h1, h2, h3, dt { break-after: avoid; }
  tr, aside.note, figure, img, .index li { break-inside: avoid; }
  thead { display: table-header-group; }
  table { font-size: 8.6pt; }
  figure.shot img { box-shadow: none; border-radius: 2px; }
  figure figcaption { font-size: 8pt; }
  a { color: inherit; }
  .index { columns: 2; font-size: 8.6pt; }
  .index a { display: inline; margin: 0; font-size: inherit; }
  .index a .where { display: none; }
  .index a .pg { display: inline; }
  .index a + a::before { content: ", "; color: var(--ink-3); }
  .index a .pg:empty::after { content: "\2022"; }       /* no page known (printed from a browser): a dot */
}