/* feedback.css — Both feedback panels.
   Cascade position 17 of 18. Order is load-bearing and is asserted by
   verify-fixtures.mjs; index.html links these explicitly (never @import) because Caddy's
   try_files turns a missing file into a 200 text/html SPA shell.
   Owner after Step 1: section (m). */
.feedback {
  display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.feedback.on { display: block; }
.feedback label {
  display: block; font-size: 12px; font-weight: 600; color: var(--dim); margin-bottom: 5px;
}
.feedback textarea {
  width: 100%; min-height: 72px; resize: vertical; padding: 10px 11px; border: 0;
  border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; font-size: var(--sn-text-sm);
  box-shadow: inset 0 0 0 1px var(--line); outline: none;
}
.feedback textarea:focus { box-shadow: inset 0 0 0 1.5px var(--signal); }
.feedback textarea:disabled { opacity: .55; }
.alt-list { display: grid; gap: 5px; margin: 8px 0 10px; }
.alt-card {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 2px 8px; align-items: start;
  text-align: left; padding: 8px 10px; border-radius: 9px; cursor: pointer;
  background: var(--surface); color: var(--ink); font: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
}
.alt-card:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.alt-card:has(input:checked) {
  background: rgb(var(--sn-accent-rgb) / 0.07058823529411765); box-shadow: inset 0 0 0 1.5px var(--signal);
}
.alt-card:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.alt-card input[type="radio"] {
  margin: 3px 0 0; accent-color: var(--signal); width: 14px; height: 14px;
}
.alt-card b { font-size: 12.5px; font-weight: 700; grid-column: 2; }
.alt-card .alt-down {
  grid-column: 3; font-size: 11px; color: var(--dim2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.alt-card .alt-summary {
  grid-column: 2 / -1; font-size: 11.5px; color: var(--dim2); line-height: 1.3;
}
.feedback__row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.feedback__row .cta {
  width: auto; padding: .65em 1em; font-size: var(--sn-text-sm); border-radius: 9px;
}
.feedback__row .ghost {
  border: 0; background: none; color: var(--dim); font: inherit; font-size: 12.5px;
  padding: .5em .7em; border-radius: 8px;
}
.feedback__row .ghost:hover:not(:disabled) { color: var(--ink); background: rgb(var(--sn-white-rgb) / 0.047058823529411764); }
.feedback__row .ghost:disabled { opacity: .4; cursor: not-allowed; }
.feedback__status {
  display: none; margin-top: 10px; padding: 9px 11px; border-radius: 9px;
  font-size: 12.5px; line-height: 1.4;
}
.feedback__status.on { display: block; }
.feedback__status.is-ok {
  color: var(--sn-ink-soft); background: rgb(var(--sn-accent-rgb) / 0.0784313725490196); box-shadow: inset 0 0 0 1px rgb(var(--sn-accent-rgb) / 0.25098039215686274);
}
.feedback__status.is-ok b { color: var(--signal); }
.feedback__status.is-err {
  color: var(--sn-bad-ink); background: rgb(var(--sn-bad-legacy-rgb) / 0.10196078431372549); box-shadow: inset 0 0 0 1px rgb(var(--sn-bad-legacy-rgb) / 0.25098039215686274);
}
.feedback__status.is-err b { color: var(--sn-bad-title); }
.feedback__status.is-busy {
  color: var(--dim); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}

/* General testing feedback is separate from the pose verdict above. It opens
   after every completed generation, including jobs with no reviewable pose. */
.generation-feedback {
  display: none; padding: 16px 18px 18px; border-bottom: 1px solid var(--line);
  background: var(--sn-surface-1-alt);
}
.generation-feedback.on { display: block; }
/* The Send button is what the sticky dock covered. The room for it is reserved by
   `scroll-padding-bottom` on `.sheet__scroll` in css/dock.css, so the fix is one rule in
   the file that owns the dock rather than 112 px of padding inside this panel's own
   `border-bottom` — that drew a permanently empty bordered box under Send and did
   nothing for #notice and #loadNotice, which sit between this panel and the dock.
   `scroll-margin-bottom` here is the belt to that braces: anything that scrolls the
   button itself into view (a browser scrolling focus into view after a keyboard tab,
   for instance) stops clear of the dock too, at the same dock-derived height. */
#generationFeedbackSubmit { scroll-margin-bottom: var(--sn-dock-clearance); }
.generation-feedback__head {
  width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  border: 0; padding: 0; background: none; color: inherit; font: inherit; text-align: left;
}
.generation-feedback__head b { font-size: 15px; letter-spacing: -.01em; }
.generation-feedback__head small {
  grid-column: 1; color: var(--dim); font-size: 12px; line-height: 1.4; max-width: 34ch;
}
.generation-feedback__head span {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--signal);
  font-size: 12px; font-weight: 650;
}
.generation-feedback__head:hover span { color: var(--sn-ok); }
.generation-feedback__head:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.generation-feedback__body { margin-top: 14px; }
.print-outcome {
  margin-bottom: var(--sn-space-4);
  padding-bottom: var(--sn-space-4);
  border-bottom: 1px solid var(--sn-line);
}
.print-outcome h3 { margin: 0; color: var(--sn-ink); font-size: var(--sn-text-sm); }
.print-outcome > p { margin: var(--sn-space-1) 0 0; color: var(--sn-ink-mute); font-size: var(--sn-text-xs); }
.print-outcome__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sn-space-2); margin-top: var(--sn-space-3); }
.print-outcome__choices button {
  min-height: 40px;
  padding: var(--sn-space-2);
  border: 1px solid var(--sn-line);
  border-radius: var(--sn-radius-sm);
  background: var(--sn-surface-2);
  color: var(--sn-ink-dim);
  font: inherit;
  font-size: var(--sn-text-xs);
}
.print-outcome__choices button[aria-pressed="true"] {
  border-color: var(--sn-accent);
  background: var(--sn-accent-tint);
  color: var(--sn-accent);
}
.print-outcome > label { display: block; margin-top: var(--sn-space-3); color: var(--sn-ink); font-size: var(--sn-text-xs); font-weight: 650; }
.print-outcome textarea {
  width: 100%;
  min-height: 64px;
  margin-top: var(--sn-space-1);
  padding: var(--sn-space-2) var(--sn-space-3);
  resize: vertical;
  border: 1px solid var(--sn-line);
  border-radius: var(--sn-radius-sm);
  background: var(--sn-surface-2);
  color: var(--sn-ink);
  font: inherit;
  font-size: var(--sn-text-xs);
}
.print-outcome__actions { margin-top: var(--sn-space-2); }
.print-outcome__status { min-height: 1.4em; }
.print-outcome[aria-busy="true"] { cursor: progress; }
.print-outcome :disabled { cursor: not-allowed; }
.generation-feedback__field { display: grid; gap: 6px; }
.generation-feedback__field label { font-size: 12px; font-weight: 650; color: var(--ink); }
.generation-feedback__field textarea {
  width: 100%; min-height: 96px; resize: vertical; border: 0; border-radius: 9px;
  padding: 10px 11px; background: var(--surface); color: var(--ink); font: inherit;
  font-size: var(--sn-text-sm); line-height: 1.45; box-shadow: inset 0 0 0 1px var(--line); outline: none;
}
.generation-feedback__field textarea::placeholder { color: var(--sn-ink-placeholder); }
.generation-feedback__field textarea:focus { box-shadow: inset 0 0 0 1.5px var(--signal); }
.generation-feedback__field textarea:disabled { opacity: .55; cursor: not-allowed; }
.feedback-upload {
  margin-top: 10px; padding: 11px; display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: 4px 10px; border-radius: 9px; border: 1px dashed var(--line-strong);
  background: rgb(var(--sn-white-rgb) / 0.0196078431372549); transition: border-color .15s ease, background .15s ease;
}
.feedback-upload.is-dragging { border-color: var(--signal); background: rgb(var(--sn-accent-rgb) / 0.050980392156862744); }
.feedback-upload button {
  grid-row: 1 / span 2; border: 0; border-radius: 8px; padding: .62em .82em;
  background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong);
  font: inherit; font-size: 12.5px; font-weight: 650;
}
.feedback-upload button:hover:not(:disabled) { background: rgb(var(--sn-white-rgb) / 0.07058823529411765); }
.feedback-upload button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.feedback-upload b { font-size: 12px; color: var(--ink); }
.feedback-upload small { color: var(--dim2); font-size: 11px; line-height: 1.35; }
.feedback-upload button:disabled { opacity: .45; cursor: not-allowed; }
.generation-feedback__files {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 8px;
}
.generation-feedback__files:empty { display: none; }
.feedback-image {
  min-width: 0; position: relative; overflow: hidden; border-radius: 9px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.feedback-image img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--sn-surface-0); }
.feedback-image__meta { padding: 6px 7px 7px; min-width: 0; }
.feedback-image__meta b,
.feedback-image__meta small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feedback-image__meta b { color: var(--ink); font-size: var(--sn-text-2xs); font-weight: 600; }
.feedback-image__meta small { color: var(--dim2); font-size: 10px; margin-top: 2px; }
.feedback-image button {
  position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border: 0;
  border-radius: 7px; background: rgb(var(--sn-surface-0-rgb) / 0.8509803921568627); color: rgb(var(--sn-white-rgb)); font: inherit; font-size: 15px;
  line-height: 1; box-shadow: inset 0 0 0 1px rgb(var(--sn-white-rgb) / 0.16862745098039217);
}
.feedback-image button:hover:not(:disabled) { background: rgb(var(--sn-surface-4-rgb) / 0.9098039215686274); }
.feedback-image button:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.feedback-image button:disabled { display: none; }
.generation-feedback__helper { margin-top: 8px; color: var(--dim2); font-size: 11px; line-height: 1.4; }
.generation-feedback__status {
  display: none; margin-top: 10px; padding: 9px 11px; border-radius: 9px;
  font-size: 12px; line-height: 1.4;
}
.generation-feedback__status.on { display: block; }
.generation-feedback__status.is-ok {
  color: var(--sn-ink-soft); background: rgb(var(--sn-accent-rgb) / 0.0784313725490196); box-shadow: inset 0 0 0 1px rgb(var(--sn-accent-rgb) / 0.25098039215686274);
}
.generation-feedback__status.is-ok b { color: var(--signal); }
.generation-feedback__status.is-err {
  color: var(--sn-bad-ink); background: rgb(var(--sn-bad-legacy-rgb) / 0.10196078431372549); box-shadow: inset 0 0 0 1px rgb(var(--sn-bad-legacy-rgb) / 0.25098039215686274);
}
.generation-feedback__status.is-err b { color: var(--sn-bad-title); }
.generation-feedback__status.is-busy {
  color: var(--dim); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.generation-feedback__status a {
  display: inline-block; margin: 6px 0 0; color: var(--signal); font-weight: 700;
  text-underline-offset: 2px;
}
.generation-feedback__actions { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
.generation-feedback__actions .cta { width: auto; padding: .68em 1em; font-size: var(--sn-text-sm); border-radius: 9px; }
.generation-feedback__actions .ghost {
  border: 0; border-radius: 8px; padding: .55em .72em; background: none;
  color: var(--dim); font: inherit; font-size: 12.5px;
}
.generation-feedback__actions .ghost:hover:not(:disabled) { color: var(--ink); background: rgb(var(--sn-white-rgb) / 0.047058823529411764); }
.generation-feedback__actions button:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 560px) {
  .print-outcome__choices { grid-template-columns: 1fr; }
}