/* /feedback/: the feedback form. Loaded after beta.css, which gives the layout, cards, fields and messages. */

/* "What kind?" chips: real radio buttons, drawn as crayon cards. */
.kinds { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.kinds legend { display: block; padding: 0; margin: 0 0 8px; font-weight: 800; font-size: 17px; }
.kind-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kind {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 92px; padding: 12px 6px 10px; border-radius: 20px; background: #fff;
  border: 2.5px solid var(--ink-3); font-weight: 800; font-size: 16px; line-height: 1.2; text-align: center;
  cursor: pointer; transition: transform .15s ease, background-color .15s ease;
}
.kind input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kind img { width: 40px; height: 40px; pointer-events: none; }
.kind span { pointer-events: none; }
.kind:hover { transform: rotate(-1deg); }
.kind:has(input:focus-visible) { box-shadow: var(--focus); }
.kind:has(input:checked) { border-color: var(--ink); border-width: 3px; transform: rotate(-1.5deg); }
.k-bug:has(input:checked)   { background: var(--tint-pink); }
.k-idea:has(input:checked)  { background: var(--tint-sun); }
.k-love:has(input:checked)  { background: var(--tint-leaf); }
.k-other:has(input:checked) { background: var(--tint-sky); }
.kind:has(input:checked)::after {
  content: "\2713"; position: absolute; top: -10px; right: -8px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 15px; font-weight: 900; line-height: 26px; text-align: center;
}
.kind:has(input[aria-invalid="true"]) { border-color: var(--rose-ink); background-color: #FFF7F8; }

/* The message box, styled like the other fields in beta.css. */
.field textarea {
  display: block; width: 100%; box-sizing: border-box; min-height: 168px; padding: 12px 14px; resize: vertical;
  font: inherit; font-size: 17px; line-height: 1.5; color: var(--ink); background: #fff;
  border: 2.5px solid var(--ink-3); border-radius: 16px;
}
.field textarea:focus-visible { outline: none; border-color: var(--blue-deep); box-shadow: 0 0 0 3px var(--tint-sky); }
.field .count { margin: 6px 0 0; text-align: right; color: var(--ink-3); font-size: 14px; font-weight: 700; }
.field .count.near { color: var(--rose-ink); }

.fb .beta-how a { color: var(--blue-deep); font-weight: 700; }
.beta-msg .fb-again { display: inline-block; margin-top: 4px; font-weight: 800; }
.fb-form textarea { scroll-margin-top: 110px; }

@media (max-width: 480px) {
  .kind-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kind { flex-direction: row; justify-content: flex-start; min-height: 60px; gap: 10px; padding: 8px 12px; text-align: left; }
  .kind img { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .kind, .kind:hover, .kind:has(input:checked) { transition: none; transform: none; }
}