/* ==========================================================================
   Feedback form — learner feedback on a topic or lesson. See components/feedback.js.
   ========================================================================== */

.feedback {
  margin-top: var(--cds-spacing-09);
  padding-top: var(--cds-spacing-07);
  border-top: 1px solid var(--cds-border-subtle);
}

.feedback__title {
  margin-bottom: var(--cds-spacing-03);
}

.feedback__lead {
  max-width: 44rem;
  margin-bottom: var(--cds-spacing-06);
  color: var(--cds-text-secondary);
}

.feedback__form {
  display: grid;
  gap: var(--cds-spacing-05);
  max-width: 44rem;
}

.feedback__field {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-02);
}

.feedback__label {
  font-size: 0.875rem;
  font-weight: 600;
}

.feedback__hint {
  font-size: 0.8125rem;
  color: var(--cds-text-secondary);
}

.feedback__input,
.feedback__select,
.feedback__textarea {
  width: 100%;
  padding: var(--cds-spacing-03) var(--cds-spacing-04);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--cds-text-primary);
  background: var(--cds-layer);
  border: 1px solid var(--cds-border-strong);
  border-radius: var(--cds-radius, 0);
}

.feedback__textarea {
  resize: vertical;
  min-height: 3rem;
}

.feedback__input:focus-visible,
.feedback__select:focus-visible,
.feedback__textarea:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

.feedback__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-spacing-05);
}

.feedback__status {
  margin: 0;
  font-size: 0.875rem;
  color: var(--cds-text-secondary);
}

.feedback__status--ok {
  color: var(--cds-green-60, #198038);
  font-weight: 600;
}

.feedback__status--error {
  color: var(--cds-text-error, #da1e28);
  font-weight: 600;
}

/* Honeypot: off-screen, never shown to people. */
.feedback__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}