/* ------------------------------
   --- Editor feedback box -----
   ------------------------------ */

/* Stars on the left, the question for that rating on the right. Stacks on a narrow screen.
   Under the editor on the home page, and in fxQuiz's experimental notice - the markup is
   templates/feedback_box.php, the script typescript/src/feedback.ts. */
.editor-feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 24px;
  margin-top: 12px;
  padding: 12px 16px;
  background: #fff9d6;
  border: 1px solid #f0e2a0;
  border-radius: 6px;
  color: #333;
}

.editor-feedback .fb-label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

.editor-feedback .fb-rate { flex: 0 0 auto; }

/* The radios are written 5 down to 1 so that "~" (which only reaches later siblings) can
   light every lower star on hover or check; row-reverse puts them back as 1-5 on screen. */
.editor-feedback .fb-stars {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.editor-feedback .fb-stars input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.editor-feedback .fb-stars label {
  font-size: 26px;
  line-height: 1;
  padding: 0 2px;
  color: #d8cfa8;
  cursor: pointer;
  transition: color .1s;
}

.editor-feedback .fb-stars label:hover,
.editor-feedback .fb-stars label:hover ~ label,
.editor-feedback .fb-stars input:checked ~ label {
  color: #f5a800;
}

.editor-feedback .fb-stars input:focus-visible + label {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-radius: 3px;
}

.editor-feedback .fb-ask {
  flex: 1 1 280px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: flex-end;
}

.editor-feedback .fb-ask .fb-label { flex: 1 0 100%; margin-bottom: 0; }

.editor-feedback textarea {
  flex: 1 0 100%;
  width: auto;
  max-width: none;
  height: auto;
  min-height: 2.6em;
  padding: 6px 8px;
  border: 1px solid #e0d38f !important; /* over style.css's red/green :valid edge */
  border-radius: 4px;
  font: inherit;
  font-size: 15px;
  resize: vertical;
}

/* Below the comment, with Send beside it: asked second, and quietly, because the rating and
   the comment are worth having without it. */
.editor-feedback .fb-contact { flex: 1 0 100%; margin-top: 2px; font-size: 14px; }

.editor-feedback input[type=email] {
  flex: 1 1 200px;
  width: auto;
  max-width: none;
  padding: 6px 8px;
  border: 1px solid #e0d38f !important; /* over style.css's red/green :valid edge */
  border-radius: 4px;
  font: inherit;
  font-size: 15px;
}

.editor-feedback button {
  padding: 6px 16px;
  border: 0;
  border-radius: 4px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.editor-feedback button:disabled { opacity: .6; cursor: default; }

.editor-feedback .fb-thanks { align-self: center; font-weight: 600; }

/* To the public issues page (/bugs): pushed to the far end of the row, and small, so it never
   competes with the stars. */
.editor-feedback .fb-issues { margin-left: auto; align-self: center; font-size: 13px; color: #54647c; }

.editor-feedback [hidden] { display: none !important; }