/* FONTS
   SourceSansPro-Regular/Bold set every line of running text and every
   heading level alike (weight is the only distinguishing signal) ->
   Source Sans 3, the modern name of the same family. TTNormsPro (Focusrite's
   brand face) appears only on the cover title/subtitle, 5 runs total -> Sora,
   a geometric grotesque close to it at display sizes, kept as a second import
   only for that one masthead line. */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&family=Sora:wght@400;700&display=swap");

/* PALETTE — sampled off the manual's own pages, not assumed brand values:
   accent red from a flat section-bar fill (p.40), ink from body text,
   paper from the grey callout/table band fill. */
:root {
  --ink: #161616;
  --accent: #c51315;
  --paper: #e8e8e8;
  --link: #4682b4;
  --display: "Sora", "Source Sans 3", sans-serif;
}

* {
  box-sizing: border-box;
  margin-top: 0;
}

body {
  color: var(--ink);
  font-family: "Source Sans 3", sans-serif;
  margin: 0;
  background: #fff;
}
p {
  line-height: 1.55;
}
main {
  margin-left: 20vw;
  padding-bottom: 3em;
}
img {
  max-width: 100%;
  height: auto;
  margin-bottom: 0.75em;
}
/* a figure inside a step sits on its own line, not trailing the sentence */
li > img:not(.daw-icon):not(.fc2-inline-icon),
.topic > img {
  display: block;
}
a {
  color: var(--link);
  text-decoration: none;
}
a:hover,
a:active {
  text-decoration: underline;
}

/* MASTHEAD — full-bleed black ground, centred hero photo, title block
   bottom-left divided from the tagline/wordmark by a thin red rule
   (the cover has no colour-panel/photo split to measure). */
#masthead {
  background: #000;
  padding: 3em 3em 3.5em;
}
#masthead .hero {
  display: block;
  width: 100%;
  max-width: 60em;
  margin: 0 auto 3em;
}
#masthead .title-block {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em 2.5em;
  max-width: 60em;
  margin: 0 auto;
}
#masthead .title-block > div {
  flex: 1 1 16em;
  padding-left: 1.5em;
  border-left: 2px solid var(--accent);
}
#masthead h1 {
  font-family: var(--display);
  font-size: 1.8em;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
#masthead .subtitle {
  font-family: var(--display);
  color: #fff;
  font-size: 1.1em;
  margin-top: 0.15em;
}
#masthead .tagline {
  color: #fff;
  font-weight: 700;
  margin: 0;
}
#masthead .wordmark {
  height: 1.4em;
  width: auto;
  margin: 0.6em 0 0;
}
#masthead .version {
  text-align: right;
  color: #fff;
  font-size: 0.85em;
  max-width: 60em;
  margin: 0 auto 1em;
}

/* NAV — fixed desktop TOC */
#side-nav {
  position: fixed;
  width: 20vw;
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid #ddd;
}
#side-nav .nav-container {
  padding: 1.5em 1.25em;
}
#side-nav h3 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 0.04em;
  color: var(--accent);
}
#side-nav h4,
#toc-mobile h4 {
  font-size: 0.9em;
  margin: 0.9em 0 0.2em;
}
#side-nav h5,
#toc-mobile h5 {
  font-size: 0.82em;
  font-weight: 400;
  margin: 0.3em 0 0.3em 0.75em;
}
#side-nav a,
#toc-mobile a {
  color: inherit;
}
#side-nav a:hover,
#toc-mobile a:hover {
  color: var(--accent);
}
#toc-mobile {
  padding: 0 1em;
}

/* SECTIONS */
section {
  padding-top: 0.1em;
}
section + section {
  margin-top: 3em;
}
.flex-container {
  display: flex;
  padding-left: 2em;
  padding-right: 2em;
  flex-wrap: wrap;
}
.half-container {
  width: 100%;
  padding: 0 1em;
  container-type: inline-size;
}
/* Each topic is its own short two-column block, the way the manual gives every
   topic its own page, instead of one column pair running the whole section. */
.topic {
  columns: 2 30rem;
  column-gap: 3em;
  margin-bottom: 2em;
}
.topic.level-3 {
  border-top: 1px solid #ddd;
  padding-top: 1.2em;
  margin-top: 1.6em;
}
.half-container > header + .topic {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.no-columns {
  columns: auto !important;
}
/* Screenshot-heavy sections run one column wide, as their pages do in the
   manual: a UI screenshot squeezed into half a column is unreadable. Text
   keeps a readable measure inside the wider block. */
.wide-figures .topic {
  columns: auto;
}
.wide-figures p {
  max-width: 52em;
}
.wide-figures img {
  max-width: min(44em, 100%);
}
.half-container > header {
  column-span: all;
  margin-bottom: 1em;
}
.flow > * + * {
  margin-bottom: 1em;
}

/* HEADINGS — h2: full-bleed red bar; h3/h4: plain bold black run-in,
   distinguished from each other only by size, matching the source. */
h2 {
  color: #fff;
  background: var(--accent);
  font-weight: 700;
  text-transform: none;
  padding: 0.5em 2em;
  margin: 0;
  font-size: 1.5em;
}
h3 {
  font-size: 1.25em;
  font-weight: 700;
  margin: 0 0 0.4em;
}
h4 {
  font-size: 1.05em;
  font-weight: 700;
  margin: 0 0 0.3em;
}
h3, h4, h5, h6 {
  break-after: avoid;
}
p, li {
  break-inside: avoid;
}
/* a one-line lead-in ("To do X:") never ends a column above what it introduces */
p:has(+ ol), p:has(+ ul), p:has(+ .grid-wrapper), p:has(+ img), p:has(+ .table-scroll),
p:has(+ h3), p:has(+ h4), p:has(+ h5), p:has(+ h6),
ul:has(+ img), ol:has(+ img) {
  break-after: avoid;
}
/* a full-width diagram takes its lead-in with it, rather than leaving it
   alone at the foot of a column */
p:has(+ .panel-diagram) {
  column-span: all;
}
.keep-together {
  break-inside: avoid;
}
:has(+ p > .menu-path:only-child) {
  break-after: avoid;
}
@container (min-width: 63rem) {
  .column-end { break-after: column; }
}

/* CALLOUTS — flat grey box, bold label line, small line icon, no accent
   border (the manual signals "callout" with fill alone). */
.callout {
  background: var(--paper);
  border-radius: 6px;
  padding: 1em 1.25em;
  display: flex;
  gap: 0.9em;
  margin-bottom: 1em;
  break-inside: avoid;
}
.callout .icon {
  flex: 0 0 auto;
  width: 1.4em;
  height: 1.4em;
  margin-top: 0.1em;
}
.callout > div > strong:first-child {
  display: block;
  margin-bottom: 0.2em;
}
.callout p:last-child {
  margin-bottom: 0;
}

/* TABLES — borderless throughout: grey full-width group-header band,
   plain rows below, no cell rules (diverges from the bordered reference). */
.table-scroll {
  overflow-x: auto;
}
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
}
.doc-table th,
.doc-table td {
  text-align: left;
  padding: 0.45em 0.75em;
  vertical-align: top;
}
.doc-table thead th {
  background: var(--paper);
  font-weight: 700;
  padding: 0.5em 0.75em;
}
/* Spec-style tables use a full-width grey band as a group label instead of
   a per-column header row (source has no vertical/horizontal cell rules). */
.doc-table tr.group-row td {
  background: var(--paper);
  font-weight: 700;
}

/* FIGURES */
/* auto-fit counts its tracks off a definite max, so a capped max leaves one
   figure per row; 1fr lets a row of knob shots or a screenshot pair sit side
   by side, each image at its natural size or smaller. */
.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(8em, 100%), 1fr));
  gap: 1em;
  margin-bottom: 1em;
}
/* a figure grid is one unit: split, it drops its captions into the next column */
.grid-wrapper,
figure {
  break-inside: avoid;
}
.panel-diagram {
  display: block;
  width: 100%;
  margin: 0 0 1em;
  column-span: all;
}
figcaption {
  font-size: 0.85em;
  text-align: center;
  color: #555;
  margin-top: -0.5em;
  margin-bottom: 1em;
}

/* Numbered feature lists under panel diagrams */
ol.feature-list {
  padding-left: 1.4em;
}
ol.feature-list > li {
  margin-bottom: 0.9em;
}
ol.feature-list ul {
  margin-top: 0.4em;
}

.daw-icon,
.fc2-inline-icon {
  height: 1.1em;
  width: auto;
  vertical-align: middle;
  margin-right: 0.3em;
}
.fc2-inline-icon {
  margin: 0 0.15em;
}

footer {
  padding: 2em 3em;
  font-size: 0.85em;
  color: #555;
  border-top: 1px solid #ddd;
}

/* Mobile TOC, shown only under the breakpoint */
#toc-mobile {
  display: none;
}

@media (max-width: 900px) {
  .flex-container { flex-direction: column; padding-left: 1em; padding-right: 1em; }
  .half-container { width: 100%; padding: 0; }
  #side-nav { display: none; }
  main { margin: 0 auto; }
  #toc-mobile { display: block; }
  #masthead { padding: 2em 1.25em 2.5em; }
  h2 { padding: 0.5em 1.25em; font-size: 1.25em; }
}
@media (min-width: 901px) {
  #toc-mobile { display: none; }
}