/* Made from tokens.json. */
:root {
  /* What stands out: a turn looked at, a switch that is on, a choice filling, a stated key, the file's name; a progression's tab; what is not current. */
  --highlight: var(--fg);
  --switch-on: var(--muted);
  --choice-ink: var(--fg);
  --key-ink: var(--muted);
  --file-name-ink: var(--muted);
  --tab-fill: var(--fg);
  --tab-ink: var(--bg);
  --dim: 0.35;

  /* The faces: the page's text; the chord names and the notes under the grids; ♭ ♯ 𝄫 𝄪, which a face that has none takes from the next in its list; the text as it is written. The page loads the faces these name before it measures the sheet. */
  --face: system-ui, -apple-system, "Segoe UI", sans-serif;
  --chord-face: var(--face);
  --accidentals: system-ui;
  --chart: "Menlo", "DejaVu Sans Mono", "Consolas", "Liberation Mono", monospace;
  --leading: 1.4;
  --strong: 600;
  --file-name-size: 1.6em;
  --file-name-weight: normal;
  --chord-name-weight: normal;
  --margin: clamp(16px, 2.5vw, 56px);

  /* The page's own text, and the surfaces that lie over it; the heading's line height, and the space under it. A control is at least --target tall and wide, the least target of WCAG 2.5.8. */
  --text: 14px;
  --small: 12px;
  --round: 6px;
  --round-small: 4px;
  --target: 24px;
  --focus: 2px;
  --heading-gap: 1.8em;
  --heading-leading: 1.2;
  --heading-below: 18px;
  --sound-gap: 4px 1.4em;
  --actions-gap: 4px 20px;
  --choice-gap: 14px;
  --words-gap: 16px;
  --file-buttons-gap: 8px;
  --guide-gap: 22px;
  --guide-docked-gap: 22px 36px;
  --panel-pad: 14px;
  --panel-pad-coarse: 20px;
  --files-pad: 16px 18px;
  --sounding-pad: 8px 12px;

  /* Motion: the change between the pages and a chosen alternative's move; a switch; the fading of what is not current; the choices appearing, rising this far. */
  --morph: 0.45s;
  --morph-easing: ease;
  --switch-motion: 0.15s;
  --fade: 0.2s;
  --choices-in: 0s;
  --choices-rise: 0px;

  /* The diagrams' weights and sizes, in drawing units or as factors: --chord-line the strings, the frets and the x above a string not played; --chord-nut the nut, Chord_geometry.Size.nut, the room the layout leaves it; --chord-stroke a mark's outline, Chord_geometry.Size.stroke, which a ring is fitted to; --chord-label-halo the paper under the fret label, wide enough to fill its figures' counters; --chord-tie a tie's thickness at its middle, drawn as with a nib and fine at its ends, which the page's drawing reads; --chord-halo the paper around a mark drawn over a cross's arms; --chord-mark-scale a mark on the grid, about its centre; --chord-open-scale an open string's ring; --chord-muted-scale the x above a string not played; --chord-finger-gap between the fingering rows and the notes, Chord_geometry.Size.text_gap; --chord-marker the width of a turn's marker beside its names, and --chord-marker-gap the space after it, in ems of the names. */
  --chord-line: 0.9;
  --chord-nut: 3.5;
  --chord-stroke: 1.3;
  --chord-label-halo: 5;
  --chord-tie: 1.8;
  --chord-halo: 0.75;
  --chord-mark-scale: 1;
  --chord-open-scale: 1;
  --chord-muted-scale: 1;
  --chord-finger-gap: 5;
  --chord-marker: 0.8;
  --chord-marker-gap: 0.4;

  /* The sheet, in drawing units: one unit is --chord-scale pixels, chosen by the page between --scale-min and --scale-max; at the smallest, a note under a grid is 12px. --scale-narrow is the scale at which a full row of the diagrams per row is comfortable to read, and a full row at it is the width a Narrow sheet is capped at; the largest scale is far wider than any ordinary window. The alternatives hanging under a span are drawn at --alternative-scale, a share of the sheet's scale. --gap stands between chords of a progression, --between between progressions side by side, --row-gap between rows of progressions, --continued above the rest of a progression that did not fit its row and around the alternatives under a span. A progression's tab, before its first chord, is --tab wide, its title set upright at --tab-title, --tab-inset from the tab's foot; a continued progression's tab is outlined --tab-edge thick, and --tab-rule runs down the tab's left side, a continued tab's at least --tab-edge. A description is set at --description with lines --description-leading apart, and an opened one has --description-inset around it and corners of --description-round. A chord's names are set at --name with lines --name-leading apart, --names-gap over the grid; its later turns' names, at --later-size of that, stand --later-gap under the grid, and its comment at --note-size of theirs. Rows flow when a progression is cut into parts of at least --flow chords; should the page not fit the computed scale, it steps down at most --settle-tries times. */
  --scale-min: 1.1;
  --scale-max: 3;
  --scale-narrow: 1.4;
  --alternative-scale: 0.667;
  --gap: 6;
  --between: 40;
  --row-gap: 40;
  --continued: 10;
  --tab: 18;
  --tab-title: 11;
  --tab-edge: 1;
  --tab-rule: 0;
  --tab-inset: 7;
  --description: 11;
  --description-leading: 1.35;
  --description-inset: 6;
  --description-round: 2;
  --name: 14;
  --name-leading: 1.2;
  --names-gap: 0.5;
  --later-size: 0.85;
  --later-gap: 1.5;
  --note-size: 0.8;
  --flow: 2;
  --settle-tries: 8;

  /* Narration, never at the music's scale. Its text is --narration-text, the reader's default size, 1rem, because prose is read at length and the size a reader has chosen in the browser is the floor for reading it; the page's own --text in pixels would override that choice. Its lines stand --narration-leading apart, wider than the page's, as running prose needs, while code keeps the page's leading so that chord lines stay close. Every passage of a sheet is set at one measure, the sheet's --measure, which the page computes at each scale: the width the frame leaves after the strip, the grids' margin and the widest of its pairs' chords on one line, but at least --narration-measure-least and at most --narration-measure-most, both in ems of the narration's text, about 45 and 75 characters of prose. They are not in ch, since a ch is the width of a zero, which overstates the width of prose's characters by about a third. A row of text starts where the grids' first strings stand, past the tabs and the grids' margin, and is the measure wide; so is a pair's slot for the narration anchored before its progression. The narration anchored after it stands beside its chords where the frame leaves at least the least measure after them, as wide as what it leaves up to the most, else under them, at the measure. --text-row-gap, a line of the page's text, stands between a row of text and what stands over or under it, and over a pair's narration under its chords. A pair stacks its narration into rows of text where its row cannot hold --pair-least of its chords beside the least measure. --narration-gap stands between paragraphs, lists, quotes, code and tables; the first and second levels of headings are set at --narration-heading and --narration-subheading, the title's 1.6 in thirds, the others at the text's size; code at --narration-code of the text around it, in the face the text is written in. */
  --narration-text: 1rem;
  --narration-leading: 1.5;
  --narration-measure-least: 25em;
  --narration-measure-most: 38em;
  --text-row-gap: 1lh;
  --pair-least: 2;
  --narration-gap: 0.75em;
  --narration-heading: 1.37em;
  --narration-subheading: 1.17em;
  --narration-code: 0.9em;

  /* The PDF, which the page's style sheets do not use: its paper's margin, the same on every side; the diagrams to a full row by default, which set the diagrams' scale; and the widest a description stands over its progression's chords, in ems of its size, about 66 characters of Chords Serif. Paper has no reader's default size, so the narration's text there is --paper-narration-text, a fixed basis, with the page's --narration-leading and its measures in ems of it, computed on the paper's content width. */
  --paper-margin: 15mm;
  --per-row: 8;
  --description-measure: 31;
  --paper-narration-text: 12pt;

  /* The float on the writing page: the sheet again, compact, in the right margin: --float-share of the viewport's width, and at least --float-least pixels wide, else docked at the bottom; --float-height-share is --float-height as a share, where the page computes it. */
  --float-scale-min: 0.7;
  --float-scale-max: 1;
  --float-share: 0.33;
  --float-least: 260;
  --float-height: 70vh;
  --float-height-share: 0.7;
  --float-docked-height: 32vh;

  /* The guide: a float as tall as the drawing's and this wide. Its grids take the largest scale between --guide-scale-min and --guide-scale-max at which the widest leaves --guide-comment pixels for its comment and the tallest fills at most --guide-share of the guide's height; its rows of notes need letters at least --guide-letter-least pixels tall. */
  --guide-width: 380px;
  --guide-part-least: 320px;
  --guide-scale-min: 0.4;
  --guide-scale-max: 0.8;
  --guide-comment: 150;
  --guide-share: 0.6;
  --guide-letter-least: 8;

  /* Clickless, in milliseconds and pixels (the time set after Clickless scales them all): the pointer rests --settle on a chord, moving less than --still, to open its choices; they stay --grace after it has left; a choice fills in --audition, or --lasting for a sound that lasts, while the pointer strays at most --tolerance; the circle's note is taken after --circle-settle. The choices open --choices-gap from the pointer, which stays on what it rested on. */
  --settle: 400;
  --still: 6;
  --grace: 500;
  --audition: 300;
  --lasting: 700;
  --tolerance: 20;
  --circle-settle: 150;
  --choices-gap: 4;
  --circle-radius: 64px;

  /* Writing and touch, in milliseconds and pixels: keys come less than --typing-pause apart while typing, so a pause that long ends a burst, and the text is saved and drawn then; a touch held --long-press, moving at most --long-press-slop, writes at the place pressed, as iOS reads a long press (UILongPressGestureRecognizer's defaults). */
  --typing-pause: 150;
  --long-press: 500;
  --long-press-slop: 10;

  /* The files dialog and the settings dialog: at most this wide, and this tall; a small screen, as style.css says. */
  --files-width: 560px;
  --settings-width: 460px;
  --files-height: 70vh;
  --setting-gap: 4px 1.2em;
  --small-screen: 0;
}