/* Copyright (c) 2026 FR&D. All rights reserved. */

/* Only what concept.css doesn't already cover: the two form controls the
   access form never needed (a select and a textarea), and the rhythm of a long
   run of question/answer pairs. Everything else, including .cta, .button and
   .docs-content typography, is inherited. */

.help-gotchas {
  max-width: 42rem;
  margin: 0 auto;
}

.help-gotchas h3 {
  margin-top: 2rem;
  margin-bottom: 0.35rem;
}

.help-gotchas h3 + p {
  margin-top: 0;
}

/* Match the text input concept.css already styles, so the three controls in
   the form read as one set rather than two ours and one the browser's. That
   means its tokens too, not near-equivalents: these used to carry their own
   hex values and their own dark-mode block, which the theme toggle could not
   reach. */
.cta select,
.cta textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.8rem;
  font: inherit;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.cta textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: 1.5;
}

.cta select {
  /* The platform arrow is drawn by the OS; keeping appearance:auto means it
     stays visible and the control remains keyboard-native. */
  cursor: pointer;
}

.cta select:focus-visible,
.cta textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cta label {
  display: block;
  margin-top: 1.1rem;
  font-weight: 600;
}