@layer components {
  /* Rubric authoring */
  .rubric-author-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .rubric-author-section[hidden] { display: none; }
  .rubric-author-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .rubric-author-row {
    align-items: flex-start;
    display: flex;
    gap: 0.5rem;

    textarea { flex: 1 1 auto; }
  }
  .rubric-author-points { flex: 0 0 5rem; }

  /* The mismatch state only sets --rubric-author-hint-*. */
  .rubric-author-hint {
    --rubric-author-hint-color: var(--color-text-muted);
    --rubric-author-hint-weight: normal;

    color: var(--rubric-author-hint-color);
    font-size: 0.8rem;
    font-weight: var(--rubric-author-hint-weight);
    margin: 0;

    &.rubric-author-hint--mismatch {
      --rubric-author-hint-color: var(--color-danger);
      --rubric-author-hint-weight: 600;
    }
  }

  /* Rubric display (marker view) */
  .rubric-display {
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-block-end: 1rem;
    padding: 0.75rem;
  }
  .rubric-display-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
  }
  .rubric-display-tpb {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0;
  }
  .rubric-display-row {
    border-block-start: 1px solid var(--color-border);
    display: flex;
    font-size: 0.85rem;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.25rem 0;

    &:first-of-type { border-block-start: none; }
    span:first-child { white-space: pre-wrap; }

    &.rubric-display-row--header {
      border-block-end: 1px solid var(--color-border);
      color: var(--color-text-muted);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      padding-block-end: 0.4rem;
      text-transform: uppercase;
    }
  }
  .rubric-display-points {
    flex-shrink: 0;
    font-weight: 600;
    white-space: nowrap;
  }
}