/* players-guide.css — the Player's Guide as a web page (players-guide.html), on top of main.css and quick-start.css,
   which it shares: the same hero, contents, steps, keys and figures. This file adds what the Quick Start has no use
   for: plain tables, tip and note asides, and the "Go deeper" line that ends each chapter. Made for a phone held
   upright: a table wider than the column scrolls inside its own box, never the page. */

/* plain tables (the lanes of a new project, the pads, the engines, the step controls, the stick, the effects) */
.pg-table { margin: 8px 0 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pg-table table { width: 100%; border-collapse: collapse; font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.5; }
.pg-table th {
  padding: 0 18px 10px 0; text-align: left; border-bottom: 1px solid var(--line);
  font-variation-settings: 'wdth' 118; font-weight: 600; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.pg-table td { padding: 11px 18px 11px 0; vertical-align: top; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.pg-table td:first-child { color: var(--ink); white-space: nowrap; }
.pg-table th:last-child, .pg-table td:last-child { padding-right: 0; }

/* a tip or a note: a red rule and a small label, as the PDF hangs them in its margin */
.pg-aside { margin: 6px 0 22px; padding: 2px 0 2px 18px; border-left: 2px solid var(--red); }
.pg-aside--note { border-left-color: var(--line-2); }
.pg-aside__k {
  display: block; margin-bottom: 6px;
  font-variation-settings: 'wdth' 118; font-weight: 600; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--red);
}
.pg-aside--note .pg-aside__k { color: var(--ink-3); }
.doc .pg-aside p { margin: 0; }

/* "Go deeper": the pointer into the Reference Manual at the end of each chapter */
.doc .pg-deeper { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-3); }
.doc .pg-deeper strong { color: var(--ink); }