/* Explicit columns on purpose: the follow-up row spans `1 / -1`, and with
   `grid-template-columns: none` that line resolves back to the first one.
   The selector asks for the cell, not the fragment: an empty widget adds no
   cell and must leave the original two-column grid alone. */
.ai-assessment-metrics:has(.recruiter-feedback .ai-assessment-metric) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-assessment-metrics:has(.recruiter-feedback .ai-assessment-metric):not(
    :has(.ai-assessment-recommendation)
  ) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Both selectors are repeated here on purpose: a media query adds no
   specificity, so the two-column rule above would otherwise win. */
@media (width <= 991px) {
  .ai-assessment-metrics:has(.recruiter-feedback .ai-assessment-metric),
  .ai-assessment-metrics:has(.recruiter-feedback .ai-assessment-metric):not(
      :has(.ai-assessment-recommendation)
    ) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0.875rem;
  }
}

.recruiter-feedback {
  display: contents;
}

.recruiter-feedback form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
}

.rf-stars {
  display: flex;
  gap: 0.0625rem;
}

.rf-star {
  padding: 0 0.0625rem;
  color: var(--ui-surface-strong);
  font-size: 1.1875rem;
  line-height: 1.3;
  background: none;
  border: 0;
}

.rf-star:hover,
.rf-star:focus-visible,
.rf-star:has(~ .rf-star:hover),
.rf-star:has(~ .rf-star:focus-visible) {
  color: #f0c14b;
}

.rf-star-lit {
  color: #e0a209;
}

.rf-anchor {
  color: var(--ui-text-subtle);
  font-size: 0.75rem;
}

/* The follow-up belongs to the stars above it, so it starts at the same
   edge and stops before the action buttons on the right. Auto-placement
   follows `order`, which puts the row after every metric cell. */
.rf-more {
  grid-column: 1 / 3;
  order: 1;
  margin-top: 0.625rem;
}

@media (width <= 991px) {
  .rf-more {
    grid-column: 1 / -1;
  }
}

.rf-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  margin: 0;
  border: 0;
}

.rf-more-label {
  padding: 0;
  color: var(--ui-text-subtle);
  font-size: 0.8125rem;
}

.rf-chip {
  position: relative;
  padding: 0.25rem 0.6875rem;
  color: var(--ui-text-muted);
  font-size: 0.8125rem;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-pill);
}

.rf-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.rf-chip:has(input:checked) {
  color: var(--ui-text);
  background: var(--ui-surface-strong);
  border-color: var(--ui-surface-strong);
}

.rf-chip:has(input:focus-visible) {
  outline: 2px solid var(--ui-primary);
}

.rf-comment-row {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  gap: 0.375rem;
}

.rf-comment {
  flex: 1 1 6rem;
  min-width: 0;
  padding: 0.3125rem 0.6875rem;
  font-size: 0.8125rem;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-pill);
}

.rf-save {
  padding: 0.3125rem 0.875rem;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--ui-primary);
  border: 0;
  border-radius: var(--ui-radius-control);
}