/* ---- the report page ------------------------------------------------------
   Help › Report a Problem lands here. The boxes take the same white rule the
   email form in the footer does, so there is one way a field looks on this
   store rather than two. */
.report-form { max-width: 62ch; margin-top: 30px; }
.report-form label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.report-form input,
.report-form textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding: 10px 12px;
  border: 2px solid var(--white);
  border-radius: 0;
  background: transparent;
  color: var(--white);
}
.report-form textarea { min-height: 12em; line-height: 1.6; resize: vertical; }
.report-form input::placeholder,
.report-form textarea::placeholder { color: var(--white-dim); }
.report-form input:focus-visible,
.report-form textarea:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.report-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.report-facts label { margin-bottom: 14px; }
#facts-note { margin: 0 0 26px; }
.report-form button.buy { font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; border: 0; }
.report-form .fine { margin-top: 16px; }
.report-form .fine a { color: var(--white); text-decoration: none; border-bottom: 2px solid var(--white); }
/* Off the page rather than display:none, which some form-filling programs skip. A person
   never reaches it, by eye or by tab. */
.report-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.report-copy {
  white-space: pre-wrap;
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  border: 2px solid var(--hairline);
  padding: 12px 14px;
  margin: 0 0 18px;
}
@media (max-width: 520px) {
  .report-facts { grid-template-columns: 1fr; }
}