/* Feedback about the app: the header button, the "Wat valt je op?" sheet and the Feedback list. Zondag tokens only. */
.feedback-button { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); flex: none; margin-left: auto; border: 0;
    border-radius: 50%; background: transparent; color: var(--muted); }
.feedback-button + .who-chip { margin-left: var(--s-1); }
.feedback-button svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.feedback-button:hover { background: var(--surface); color: var(--text); }

.feedback-sheet { display: grid; gap: var(--s-3); padding: 0 var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom)); }
.feedback-sheet h2 { margin: 0; font-family: var(--display); font-size: var(--t-2xl); font-weight: 800; letter-spacing: -0.03em; }
.feedback-hint, .feedback-thanks p { margin: 0; color: var(--muted); }
.feedback-thanks { display: grid; gap: var(--s-3); }
.feedback-sheet textarea { width: 100%; min-height: 7.5rem; padding: var(--s-3) var(--s-4); border-radius: var(--r-l); background: var(--bg);
    font: inherit; color: var(--text); resize: vertical; line-height: 1.45; }
.feedback-sheet .primary.wide { margin-top: 0; }

.who-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-2); }
.secondary-link { display: inline-flex; align-items: center; min-height: var(--tap); }

.feedback-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.feedback-list li { display: grid; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-xl); background: var(--surface); }
.feedback-list li.status-done, .feedback-list li.status-wontdo { background: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.feedback-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.feedback-kind, .feedback-status { display: inline-flex; align-items: center; min-height: 1.625rem; padding: 0 var(--s-3); border-radius: var(--r-pill);
    font-size: var(--t-xs); font-weight: 700; background: var(--surface-2); color: var(--text); }
.status-new .feedback-status { background: var(--accent-soft); }
.status-picked .feedback-status { background: var(--text); color: var(--bg); }
.status-done .feedback-status { color: var(--ok); }
.feedback-text { margin: 0; font-size: 1.0625rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-note { margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-m); background: var(--bg); font-size: var(--t-s); }
.feedback-triage { display: flex; flex-wrap: wrap; gap: var(--s-1); padding: var(--s-1); border-radius: var(--r-l); background: var(--surface-2); }
.feedback-triage button { min-height: 2.25rem; padding: 0 var(--s-3); border: 0; border-radius: var(--r-pill); background: transparent;
    color: var(--muted); font-size: var(--t-s); font-weight: 600; }
.feedback-triage button.current { background: var(--text); color: var(--bg); }
.feedback-sheet textarea::placeholder { color: var(--muted); opacity: 1; }