/* site-v2 · /quickstart: the page's own compositions. Shared system: site.css. */

/* hero: six rows, each a step's output as pixels */
.mini { margin: 0; }
.mini__steps { border-top: 1px solid var(--ink); }
.mini__steps li { display: grid; grid-template-columns: 44px minmax(0, 210px) minmax(0, 1fr); column-gap: var(--s4); align-items: start; padding: 14px 0; border-bottom: 1px solid rgb(var(--ink-rgb) / .22); }
.mini__n { font-family: var(--pixel); font-weight: 800; font-size: 15px; line-height: 20px; color: var(--stone); }
.mini__t { font-family: var(--display); font-weight: 430; font-stretch: 104%; font-size: 16px; line-height: 20px; }
.mini__t code { display: block; margin-top: 4px; font-size: 11px; line-height: 1.45; color: var(--stone); white-space: normal; word-break: break-all; }
.mini__cv { display: block; }
.mini__none { font-family: var(--mono); font-size: 11px; color: var(--stone); padding-top: 2px; }
.mini__cap { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: var(--s4); }
.mini__cap span { display: inline-flex; align-items: center; gap: 8px; }
.sw { display: inline-block; width: 8px; height: 8px; }
.sw--w { background: #D37C61; }
.sw--e { background: var(--ink); }

/* the steps: a rail of stations */
.qs-steps { padding-top: 10vh; }
.steps { position: relative; }
.step { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: 64px; padding: var(--s7) 0 var(--s8); border-top: 1px solid var(--ink); }
.step__n { font-family: var(--pixel); font-weight: 800; font-size: clamp(44px, 4.4vw, 68px); line-height: .9; color: var(--ink); }
.step__h { font-family: var(--display); font-weight: 400; font-stretch: 104%; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.05; letter-spacing: -0.028em; }
.step__b { max-width: 820px; min-width: 0; }
.step__b > .body { max-width: 620px; }
.step__b > .code { margin-top: var(--s4); }
.step__b > .code + .body, .step__b > .code + .code { margin-top: var(--s4); }
.step .form { margin-top: var(--s4); }
.code--term pre { font-size: 12.5px; }

/* the CLI, ink */
.cli td.k { width: 46%; }
.cli td.k code { font-size: 12.5px; word-break: break-word; }
.env { margin-top: var(--s7); }
.env td.k { width: 28%; }

/* next */
.next { border-top: 1px solid var(--ink); }
.next li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4fr) auto; column-gap: var(--s5); align-items: center; padding: var(--s4) 0; border-bottom: 1px solid rgb(var(--ink-rgb) / .22); }
.next li .mono-l { color: var(--ink); }
.next li .code { margin-top: 0; }
.next li .code pre { padding: 8px 12px; }
.next li .note { margin-top: 0; }
.next li:not(:first-child) .note { grid-column: 2 / 4; }

@media (max-width: 1180px) and (min-width: 760px) {
  .phero.qs-hero { grid-template-columns: minmax(0, 1fr); }
  .mini { margin-top: var(--s6); }
  .step { grid-template-columns: 1fr; row-gap: var(--s4); }
}
@media (max-width: 759px) {
  .mini { margin-top: var(--s6); }
  .mini__steps li { grid-template-columns: 30px minmax(0, 1fr); row-gap: 8px; }
  .mini__steps li > :last-child { grid-column: 2; }
  .step { grid-template-columns: minmax(0, 1fr); row-gap: var(--s3); padding: var(--s6) 0; }
  .step__n { font-size: 40px; }
  .next li { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .next li:not(:first-child) .note { grid-column: 1; }
  .cli td.k, .env td.k { width: 100%; }
}

/* ==========================================================================
   phone-design, Round 2: /quickstart (and the landing pages' stepped rails) on a phone (≤ 759px).
   Every rule is inside the phone query.
   ========================================================================== */
@media (max-width: 759px) {
  /* hero: the headline, the lede, each step's output as pixels, then the contents */
  .phero.qs-hero { display: flex; flex-direction: column; }
  .qs-hero .phero__text { display: contents; }
  .qs-hero .kicker { order: 1; }
  .qs-hero .h1p { order: 2; }
  .qs-hero .lede { order: 3; }
  .qs-hero .mini { order: 4; margin-top: var(--s5); }
  .qs-hero .toc { order: 5; }

  /* the steps: a rail of stations, each step's number on it in pixel type; code runs the screen's full width and
     scrolls inside itself */
  .steps { position: relative; }
  .steps::before { content: ''; position: absolute; left: 21px; top: 6px; bottom: 64px; width: 1px; background: rgb(var(--ink-rgb) / .3); }
  .step { position: relative; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 0; padding: 0 0 64px; border-top: 0; }
  .step__n { position: relative; z-index: 1; align-self: start; padding: 4px 0 12px; background: var(--paper); font-size: 30px; line-height: 1; text-align: center; }
  .step__h { font-size: 27px; }
  .step__b > .code { margin-left: -80px; margin-right: -20px; border-left: 0; border-right: 0; background: linear-gradient(var(--code-bg), var(--code-bg)), var(--paper); }
  .step__b > .code pre { padding-left: 20px; padding-right: 20px; }
  .step__b > .code .code__cap { padding-left: 20px; padding-right: 20px; }
  .step .form { margin-top: var(--s4); }
}