.setup-page { padding-block: 48px 64px; }
.setup-intro { max-width: 720px; margin-bottom: 36px; }
.setup-intro > p:first-of-type { font-size: 19px; max-width: 46ch; }
.client-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.client-picker button[aria-pressed="false"] { background: var(--paper); color: var(--ink); border-color: var(--line); }
.client-picker button[aria-pressed="false"]:hover { background: var(--ground); }

/* The page is two things you copy, in the order you copy them. Each slab is
   labelled by WHERE it goes rather than numbered: the homepage already owns
   01/02/03, and place is the more useful distinction here anyway.
   18 Sep: this replaced a two-column split whose right-hand column held one
   short card and thirteen hundred pixels of nothing. */
.slab { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 26px; }
.slab-head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 22px; border-bottom: 1px solid var(--line); background: #fbfbfa; }
.slab-head h2 { margin: 0; font-family: var(--mono); font-size: 10.5px; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--quiet); }
.slab-copy { min-height: 36px; padding: 7px 14px; font-size: 12.5px; flex: none; }

/* The command is the hero of this page, so it is set to be read rather than
   skimmed. The prompt below it is prose you skim, so it stays small and scrolls. */
.setup-page .slab pre { margin: 0; padding: 26px 22px; border: 0; border-radius: 0;
  background: var(--paper); font-size: 15px; line-height: 1.8; white-space: pre-wrap;
  overflow-wrap: anywhere; }
/* The prompt is longer than its box. The fade is the only honest way to say
   so before someone reads a sentence that stops mid-clause. */
.prompt-wrap { position: relative; }
.prompt-wrap::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--paper)); pointer-events: none; }
.setup-page .slab pre.prompt { font-size: 12.5px; line-height: 1.7; max-height: 224px;
  overflow: auto; padding-bottom: 40px; }
#setup-availability:empty { display: none; }

/* The one piece of colour on the page, and it is doing a job: it answers
   "where does my key go" without a sentence saying so. */
.slab mark.key { background: var(--signal); color: var(--ink); padding: 1px 5px;
  border-radius: 4px; font: inherit; }

.slab-foot { border-top: 1px solid var(--line); padding: 15px 22px 17px; display: grid; gap: 7px; }
.slab-foot p { margin: 0; font-size: 13px; color: var(--quiet); }
.slab-foot p:first-child { color: var(--ink); }
.slab-foot p:empty { display: none; }
.slab-foot a { color: var(--ink); }

.setup-help { border-top: 1px solid var(--line); margin-top: 44px; padding-top: 30px; max-width: 68ch; }
.setup-page .error { color: var(--danger); }
@media (max-width: 560px) {
  .slab-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .slab-copy { width: 100%; }
  .setup-page .slab pre { font-size: 13.5px; padding: 20px 16px; }
  .slab-foot, .slab-head { padding-inline: 16px; }
}