/* Feedback page, feedback dialog, and the shared page header used by Admin. Same roles as Work:
   cool page, warm tan-edged panels with a seam under their head, rose outline around what you edit,
   status chips with dots. */
.feedback-page {overflow:auto;min-height:100dvh;background:var(--canvas)}
.feedback-page .topbar {position:sticky;top:0}
.feedback-brand {display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.feedback-brand strong {font-size:13.5px}
.feedback-brand span:not(.pilot-mark):not(.environment-label) {color:#d9d0c4;font-size:12.5px;border-left:1px solid rgba(252,249,246,.2);padding-left:12px}
#feedback-main {max-width:1120px;margin:auto;padding:0 28px 60px}
.feedback-heading {display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:22px 0 18px;margin-bottom:22px;border-bottom:1px solid var(--rule)}
.feedback-heading h1 {font:400 32px/1.1 var(--serif);letter-spacing:-.015em;color:var(--strong);margin:4px 0 8px}
.feedback-heading p {color:var(--secondary);max-width:680px;margin:0;font-size:13.5px;line-height:1.55}

.feedback-filters {display:flex;align-items:end;flex-wrap:wrap;gap:12px 14px;padding:14px 18px;border:1px solid var(--rule);border-radius:12px;background:var(--paper);box-shadow:var(--shadow-sm);margin-bottom:14px}
.feedback-page label,#feedback-dialog label {display:flex;flex-direction:column;gap:4px;font:600 12px/1.5 var(--sans);color:var(--secondary)}
.feedback-filters label {font:600 11px/16px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.feedback-page :is(input,select,textarea),#feedback-dialog :is(input,select,textarea) {font:13px/1.45 var(--sans);color:var(--ink);background:var(--field);border:1px solid var(--input-line);border-radius:6px;padding:6px 9px;min-width:0;max-width:100%;text-transform:none;letter-spacing:0}
.feedback-page :is(input,select,textarea):focus,#feedback-dialog :is(input,select,textarea):focus {outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(212,167,44,.22)}
.feedback-page textarea,#feedback-dialog textarea {resize:vertical;width:100%}
.feedback-filters select {min-width:150px;min-height:34px}
#feedback-count {font:500 11px/1.4 var(--mono);color:var(--muted);margin-left:auto;padding-bottom:9px}
#feedback-list {display:grid;gap:14px}
.feedback-empty {padding:24px 18px;color:var(--muted);border:1px dashed var(--rule);border-radius:12px;background:var(--paper);margin:0}

/* One feedback item = one tan-edged panel; resolution state lives on its chip (dot or check plus text). */
.feedback-card {background:var(--paper);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow-sm);min-width:0;padding:0 0 18px}
.feedback-card>header {display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:12px 22px;border-bottom:1px solid var(--seam);font-size:12px}
.feedback-card>:not(header) {margin-inline:22px}
.feedback-kind {font:600 11px/16px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.feedback-state {color:var(--attention-ink);background:var(--attention-wash)}
.feedback-state.resolved {color:var(--success-ink);background:var(--success-wash)}
.feedback-state.resolved::before {content:'✓';width:auto;height:auto;background:none;font-weight:800}
.feedback-card time {margin-left:auto;color:var(--muted);font-size:12px}
.feedback-card>header>.feedback-actions {display:flex;margin:0}
.feedback-card>header>.feedback-actions .button {min-height:28px;padding:4px 10px;font-size:12px}
.feedback-meta {font-size:12px;color:var(--muted);overflow-wrap:anywhere;margin:10px 0 0}
.feedback-author {display:block;margin-top:12px;font-size:13px;font-weight:600;overflow-wrap:anywhere}
.feedback-body {white-space:pre-wrap;overflow-wrap:anywhere;margin:4px 0 12px;font-size:14px;line-height:1.6}
.feedback-attachments {display:grid;gap:6px;margin-top:4px}
.feedback-attachment {min-width:0;padding:8px 12px;border:1px solid var(--rule);border-radius:8px;background:var(--paper)}
.attachment-row {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.attachment-name {flex:1;min-width:120px;font-size:13px;font-weight:600;overflow-wrap:anywhere}
.attachment-name::before {content:'▤';margin-right:7px;color:var(--muted);font-weight:400}
.attachment-name small {display:inline;margin-left:8px;font-size:11.5px;color:var(--muted);font-weight:400}
.attachment-row .button {min-height:28px;padding:4px 10px;font-size:12px}
.feedback-preview {margin-top:10px}
.feedback-preview:empty {display:none}
.feedback-preview img {display:block;max-width:100%;max-height:480px;object-fit:contain;margin:auto;border:1px solid var(--line);border-radius:4px}
.feedback-preview iframe {display:block;border:1px solid var(--line);border-radius:4px;width:100%;height:480px;background:white}
.feedback-preview pre {margin:0;padding:10px 12px;background:var(--surface);border-radius:4px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:420px;overflow:auto;font:12px/1.6 var(--mono)}
.feedback-replies-heading {font:600 11px/16px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:18px 0 6px}
.feedback-reply {padding:8px 0 8px 12px;border-left:1px solid var(--rule);margin-top:6px;margin-bottom:6px}
.feedback-reply header {display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:12px}
.feedback-reply strong {overflow-wrap:anywhere}
.feedback-reply time {margin-left:auto;font-size:11.5px;color:var(--muted)}
.feedback-reply p {white-space:pre-wrap;overflow-wrap:anywhere;margin:3px 0 0;font-size:13.5px;line-height:1.55}
.feedback-resolution {padding-top:8px;border-top:1px solid var(--line)}
/* The reply form is the card's editing region: Learn's seam outline. */
.feedback-reply-editor {margin-top:14px;padding:12px 14px 14px;border:1px solid var(--seam);border-radius:9px}
.feedback-reply-editor form {display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px}
.feedback-reply-editor :is(.feedback-dropzone,.feedback-file-list) {flex-basis:100%;min-width:0}
.feedback-reply-editor small {font-weight:400;color:var(--muted)}
.feedback-reply-editor .reply-label {flex:1;min-width:0}
.feedback-reply-editor textarea {field-sizing:content;min-height:33px;max-height:180px}
.feedback-reply-editor button {margin:0}

/* Send feedback dialog */
#feedback-dialog fieldset {border:0;padding:0;margin:0;min-width:0}
#feedback-dialog header {padding-bottom:14px;border-bottom:1px solid var(--seam);margin-bottom:12px}
#feedback-dialog label {margin:12px 0 4px}
#feedback-dialog p {font-size:13px;color:var(--secondary);margin:0}
#feedback-dialog small {font-weight:400;color:var(--muted)}
#feedback-dialog .feedback-actions {display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
:is(#feedback-dropzone,.feedback-dropzone) {margin-top:12px;padding:10px 12px;border:1px dashed var(--input-line);border-radius:9px;background:var(--field)}
:is(#feedback-dropzone,.feedback-dropzone) label {margin:0}
:is(#feedback-dropzone,.feedback-dropzone).dragging {border-color:var(--pink);background:var(--pink-wash);outline:2px solid var(--pink)}
:is(#feedback-file-list,.feedback-file-list) {list-style:none;padding:0;margin:6px 0 0;font-size:12.5px;overflow-wrap:anywhere}
:is(#feedback-file-list,.feedback-file-list) li {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0;border-top:1px solid var(--line)}
:is(#feedback-file-list,.feedback-file-list) button {min-height:26px;padding:3px 9px;font-size:11.5px}
#feedback-char-count {display:block;text-align:right;margin:2px 0 0}