/* The copy blocks on /connect (#211): long lines wrap inside the block, so the page never
   scrolls sideways, and copying a block still gives its lines as written. */
main pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0 0 1.25em;
  padding: 12px 14px;
  border: 1px solid var(--grid);
  border-radius: 6px;
}
main pre code {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* The copy button connect.js adds above each block (#229). The colours are the site's own, so
   dark and light both hold; the page has no button when the script does not run. */
main .copy-row {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 4px;
}
main .copy-row button {
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
main .copy-row button:hover {
  background: var(--grid);
}
main .copy-row button:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}
main .copy-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}