/*
 * "Was this helpful?" prompt (app/views/shared/_feedback.html.erb) — a bordered
 * card at the foot of an article: the question on the left, the thumbs up/down
 * answers held right. Its own file because the prompt is a shared component
 * rendered from more than one surface (a docs page, an API hub guide page), not
 * part of any one page's layout.
 *
 * Plain token-consuming CSS, the same pattern as prose.css/editor.css/docs.css, so
 * it tracks the active Ekosystem theme and survives Tailwind purge. Mirrors the
 * mock's `.feedback-widget` (mocks/assets/mocks.css). The answers are Ekosystem
 * button components, so this owns only the card and its row layout.
 */
.feedback {
  margin-top: 48px;
  padding: 20px 24px;
  border: 1px solid oklch(var(--eko-t-color-border));
  border-radius: var(--eko-t-border-radius-lg);
  background: oklch(var(--eko-t-color-surface));
}

/* The unanswered state: question left, answers right. It is a child of the card
 * rather than the card itself because answering swaps it for the thanks line,
 * which the controller reveals in its place — the card keeps its own metrics
 * through the swap, so it does not resize or jump under the reader's cursor. */
.feedback__prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.feedback__title {
  margin: 0;
  font-weight: 600;
}

/* Never let the answers wrap or shrink — the question line gives way first. */
.feedback__actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

/* The post-answer line, built by the controller and appended once an answer is
 * given (nothing but the prompt is in the document before that). Its min-height
 * is the height a row of buttons occupied — eko-button: 8px padding x2 + 20px
 * line-height + 1px border x2 — so the card keeps its metrics through the swap
 * and does not resize under the reader's cursor. */
.feedback__message {
  display: flex;
  align-items: center;
  min-height: 38px;
  margin: 0;
  font-weight: 600;
}

/* The comment step, in the prompt's place after a thumbs down (hidden in the
 * markup until then). No min-height trick here: unlike the thanks line this is
 * taller than the row it replaces whatever we do, and a card that grows to hold a
 * textarea the reader asked for is not a card that jumped under their cursor. */
.feedback__comment > * + * {
  margin-top: 16px;
}

/* The label reads as the question the card is now asking, so it carries the
 * weight the prompt's title had rather than a form label's. */
.feedback__comment eko-label {
  font-weight: 600;
}

/* Left, under the field — the reading order of the mock, and the button lands
 * where the textarea's bottom-left corner leaves the eye. */
.feedback__submit {
  display: flex;
  justify-content: flex-start;
}

/* Too narrow for one row: stack the answers under the question. */
@media (max-width: 640px) {
  .feedback__prompt {
    flex-direction: column;
    align-items: flex-start;
  }
}