/* quick-start.css — the Quick Start guide as a web page (quick-start.html), on top of main.css.
   Made to read on a phone held upright: no sideways scrolling, figures full width, the one table turned into a
   list under 640 px. The words and the panel's inline markup (kbd, .ctl, .val, q.screen) follow the PDF's own
   (docs/manual/manual.css in the app repo), redrawn for the site's dark page. */

/* the hero: the PDF links and the contents */
.qs-pdf { max-width: 70ch; font-size: 15px; line-height: 1.6; color: var(--ink-3); text-wrap: pretty; }
.qs-pdf a { color: var(--ink); border-bottom: 1px solid var(--red); }
.qs-pdf a:hover { color: var(--red); }

.qs-toc { width: 100%; max-width: 980px; scroll-margin-top: 80px; padding-top: 6px; }
.qs-toc .label { display: block; margin-bottom: 12px; }
.qs-toc ol {
  list-style: none; margin: 0; padding: 0;
  column-width: 340px; column-gap: clamp(24px, 4vw, 56px);
  border-top: 1px solid var(--rule);
}
.qs-toc li { break-inside: avoid; border-bottom: 1px solid var(--rule); }
.qs-toc a {
  display: flex; align-items: baseline; gap: 14px; padding: 13px 0;
  font-variation-settings: 'wdth' 112; font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--ink-hi);
}
.qs-toc a span { flex: none; width: 2.2ch; font-family: var(--mono); font-size: 12px; color: var(--red); }
.qs-toc a:hover { color: var(--red); }

/* chapters: no sticky section row on this page, so a jump lands just under the header */
.qs-sec { scroll-margin-top: 76px; }
.qs-sec h3 { scroll-margin-top: 76px; }
.doc .qs-lede { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55; color: var(--ink-hi); margin-bottom: 22px; }
.qs-num { margin-right: .45em; font-family: var(--mono); font-weight: 600; font-size: .78em; color: var(--red); }

/* numbered steps, 01 02 03, in the place of the bullets' red dot */
.doc ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: step; }
.doc ol > li { counter-increment: step; padding-left: 34px; }
.doc ol > li::before {
  content: counter(step, decimal-leading-zero);
  top: 0; margin-top: 0; width: auto; height: auto; border-radius: 0; background: none;
  font-family: var(--mono); font-weight: 600; font-size: .72em; line-height: 2.3; color: var(--red);
}

/* the panel's keys and words */
.qs kbd {
  display: inline-block; margin: 0 .06em; padding: 0 .55em;
  border-radius: 5px; background: linear-gradient(180deg, #2A2D31, #1C1E21);
  box-shadow: inset 0 0 0 1px #474A50, 0 2px 0 #000;
  font-family: var(--sans); font-variation-settings: 'wdth' 115; font-weight: 600;
  font-size: .72em; line-height: 1.95; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap; vertical-align: .1em;
}
.qs .ctl { font-variation-settings: 'wdth' 112; font-weight: 600; font-size: .86em; letter-spacing: .07em; color: var(--ink); }
.qs .val { font-family: var(--mono); font-weight: 500; font-size: .84em; color: var(--ink); }
.qs .path { font-weight: 500; color: var(--ink); }
/* words the screen prints: white on black, as the phone shows them */
.qs q.screen {
  quotes: none; padding: .12em .5em; border-radius: 4px;
  background: #000; color: #F2F4F6; box-shadow: inset 0 0 0 1px var(--line);
  font-variation-settings: 'wdth' 112; font-weight: 600; font-size: .8em; letter-spacing: .08em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.qs q.screen::before, .qs q.screen::after { content: none; }

/* figures: the panel in a dark bezel, full width; a tap opens the picture on its own, where it can be zoomed */
.qs-fig { margin: clamp(26px, 3vw, 40px) 0 clamp(28px, 3.2vw, 44px); display: flex; flex-direction: column; gap: 14px; }
.qs-shot {
  display: block; padding: clamp(4px, .6vw, 8px); border-radius: clamp(10px, 1.4vw, 18px);
  background: var(--bezel); box-shadow: 0 0 0 1px var(--ring);
}
.qs-shot img { width: 100%; height: auto; border-radius: clamp(6px, 1vw, 12px); }
.qs-fig figcaption { max-width: 70ch; font-size: 15px; line-height: 1.55; font-style: italic; color: var(--ink-3); text-wrap: pretty; }

/* the PROJECTS keys: two columns, one under the other on a phone */
.qs-keys { display: grid; grid-template-columns: max-content 1fr; margin: 8px 0 22px; border-top: 1px solid var(--line); }
.qs-keys dt, .qs-keys dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.qs-keys dt { padding-right: 28px; white-space: nowrap; line-height: 1.66; }
.qs-keys dd { font-size: clamp(16px, 1.15vw, 17.5px); line-height: 1.66; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 640px) {
  .qs-keys { grid-template-columns: minmax(0, 1fr); }
  .qs-keys dt { padding: 14px 0 2px; border-bottom: 0; }
  .qs-keys dd { padding-top: 0; }
}

/* back to top, at the end of every chapter */
.doc .qs-top { margin: 26px 0 0; }
.doc .qs-top a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 0;
  font-variation-settings: 'wdth' 118; font-weight: 600; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.doc .qs-top a span { color: var(--red); font-family: var(--mono); }
.doc .qs-top a:hover { color: var(--red); }