@use "@fox/styles/abstracts" as fox;

.form {
  display: flex;
  inline-size: 100%;
  flex-direction: column;
  border-block-start: fox.border(1) solid fox.color(border-neutral-subtle);
}

.row {
  display: flex;
  inline-size: 100%;
  align-items: flex-start;
  gap: fox.gap(6);
  padding-block: fox.padding(5);
  padding-inline: fox.padding(4);
  border-block-end: fox.border(1) solid fox.color(border-neutral-subtler);
}

.label {
  flex: 0 0 140px;
  padding-block-start: fox.padding(2);
}

.field {
  display: flex;
  flex: 1 1 0;
  min-inline-size: 0;
  flex-direction: column;
  gap: fox.gap(3);
}

.inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: fox.gap(3);
}

.grades {
  display: flex;
  flex-direction: column;
  gap: fox.gap(3);
}

.keywordRow {
  display: flex;
  align-items: center;
  gap: fox.gap(2);
}

.keywordName {
  flex: 0 0 200px;
  min-inline-size: 0;
}

.keywordDescription {
  flex: 1 1 0;
  min-inline-size: 0;
}

.cuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: fox.gap(4);
}

.cut {
  display: flex;
  flex-direction: column;
  gap: fox.gap(2);
  padding: fox.padding(3);
  border: fox.border(1) solid fox.color(border-neutral-subtler);
  border-radius: fox.radius(2);
}

.cutFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: fox.gap(2);
}

.cutLabel {
  font-size: fox.font-size(label-sm);
  color: fox.color(font-neutral-subtle);
}

.thumbnail {
  display: flex;
  align-items: flex-start;
  gap: fox.gap(4);
}

.answerLines {
  display: flex;
  flex-direction: column;
  gap: fox.gap(3);
}

.answerMessage {
  flex: 1 1 0;
  min-inline-size: 0;
  max-inline-size: 360px;
}