/* Report a problem (tickets/T128-signaler-un-probleme.md): a line of the
   menu (T146); the step is a field, a line on what is sent, and the key. */

.problem { display: flex; flex-direction: column; align-items: center; margin-top: 40px; }
.problem[hidden], .problem [hidden] { display: none; }
.problem__form { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; max-width: 480px; }
.problem > *:not([hidden]) { animation: surface 1.2s var(--ease-soft) both; }
/* The house field (T64), at the height of a few lines instead of one. */
.problem__text {
  display: block;
  width: 100%;
  min-height: 136px;
  padding: 16px 20px;
  border: 0;
  border-radius: 24px;
  background: var(--control);
  box-shadow: var(--field-up);
  color: var(--ink);
  font: 500 14px/20px var(--font-ui);
  letter-spacing: -0.02em;
  resize: vertical;
  user-select: text;
  transition: box-shadow 120ms ease;
}
.problem__text:focus { outline: none; box-shadow: var(--field-down); }
.problem__text::placeholder { color: var(--ink); opacity: 0.4; }
@media (pointer: coarse) { .problem__text { font-size: 16px; } }   /* under 16, iOS zooms in on focus */
/* The trap: out of sight and out of the tab order, never display:none — some
   robots skip a field they can tell is hidden. */
.problem__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.problem .hint { text-align: center; }