/* Feedback (SPEC 62, feedback.py): the form and thank-you page (templates/feedback.html) and Admin > Feedback
   (templates/admin/feedback.html). Colours are the site's tokens, so light mode follows the device like everything else. */

/* The form: the honeypot stays off screen (people never see or reach it) */
.fb-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.fb-hp input { width: 1px; height: 1px; padding: 0; border: 0; }
.fb-field-error { margin-top: 8px; }
.fb-form { grid-template-columns: minmax(0, 1fr); } /* a file input's "Choose file" text never widens the card at 320 px */
.feedback-card .field input[type="file"] { max-width: 100%; min-width: 0; }
.fb-sender { display: flex; align-items: center; gap: 8px; margin: 0; }
.fb-sender .icon { flex: none; }
.fb-actions { flex-wrap: wrap; }

/* Admin > Feedback */
.fb-filters { display: grid; gap: 8px; margin-bottom: 16px; min-width: 0; }
.fb-items { display: grid; gap: 12px; }
.fb-item { display: grid; gap: 12px; padding: 16px 18px; min-width: 0; }
.fb-item.is-open { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }
.fb-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fb-item-title { margin: 0; font-size: 17px; }
.fb-when { margin-left: auto; }
.fb-prose { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.fb-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px 16px; margin: 0; }
.fb-facts dt { font-size: 12px; color: var(--text-3); }
.fb-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fb-ua { display: block; margin-top: 2px; font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; }
.fb-shot { display: inline-grid; gap: 6px; justify-self: start; max-width: 100%; color: var(--accent-text); font-weight: 600; }
.fb-shot img {
  width: auto; height: auto; max-width: min(100%, 360px); max-height: 240px; object-fit: contain;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2);
}
.fb-shot span { display: inline-flex; align-items: center; gap: 4px; }
.fb-shot:hover span { text-decoration: underline; }
.fb-item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fb-item-actions p { margin: 0; }
.fb-pages { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }